How to display the content from controller on HTML page in angularjs? - angularjs

Question

I am new to angularjs. I am trying to display the content from controller to the HTML but I am getting the data in console and I am not able to show it on the browser.
My html code:
<ion-list >
<ion-item ng-repeat="item in taskdetails" item="item" class="item-remove-animate item " class="itembg" on-swipe-right="showcard(item._id)" on-hold=" data.showReorder = !data.showReorder">
<span class="toptask" ng-hide="task.hide">
<span style="opacity:0.8"> {{ item.title| limitTo:10 }}<span ng-show="item.title.length> 10"><b> ...</b></span></span>
<small class="time " style="float:right;"> <i class="button button-icon icon ion-play balanced" ng-class="{ 'ion-pause assertive': !data.paused, 'ion-play balanced': data.paused}" ng-click="play5(item.id)" ></i>
</small>
<div style="float:right;margin-right:5px; font-size: 32px;
position: absolute;
right: 10px;
top: 10px;
color: black;" class="time icon ">
<i ng-class="{ 'ion-gear-b': data.paused, 'ion-loading-c spin': !data.paused}" class=" icon balanced" ng-click="showcard(item.id)"></i>
</div>
</span>
</ion-item>
</ion-list>
Controller
$scope.openTasks = function (impFlag, urgFlag) {
console.log("important came as: " + impFlag + " , urgent falg came as: " + urgFlag);
quadrantservice.gettask.get({
important: impFlag,
urgent: urgFlag
}).$promise.then(function (result) {
$scope.taskdetails = result;
console.log('task detailssssssssssssss' + JSON.stringify($scope.taskdetails));
/*$state.go('listoftask', {
important: impFlag,
urgent: urgFlag
});*/
});
$state.go('/listostasks');
}
I am getting the data in console but I am not able to display it on 'listoftasks' state.

Answer 1

You need $watch on your data change because intially data is not available so you need to watch the changes and reflect it accordingly.
$scope.$watch('taskdetails',function(newVal){
if(typeof newVal !='undefined'){
$scope.taskdetails=newVal;
}
});
//Place this in your maincontroller.