ajax - scope variable does not get updated after adding data to it (on view page) -

im building cart in angular js. works user clicks on item function addtocart adds database

then on te page have cart wich displays cart contents. in addtocart method update cart.. , want show data.

the strange thing $scope.cart shows objects in console... works fine... on view page {{cart}} var shows [] , not updated... normaly every var updates automaticly reason 1 not:

controller (stripped down)

  c2app.controller('makeordercontroller', function($scope, $rootscope, $http, $location, $routeparams, sharedata, ngdialog) {     //there more cvars here ... not important     $scope.cart = [];      $scope.addtocart = function() {         $http({           url: "http://localhost/c2api/addtocart",           method: 'post',           data:            {             'sessionid' : $rootscope.sessionid,             'menuid' : $scope.menuid,             'catid' : $scope.catid,             'resid' : $scope.resid,             'singlecat' : $scope.singlecat,              'multicat' : $scope.multicat,              'singlemenu' : $scope.singlemenu,              'multimenu' : $scope.multimenu,             'qty' : $scope.qty           },           headers : {'content-type':'application/x-www-form-urlencoded; charset=utf-8'}         }).success(function(data){          //update cart         $scope.getcart($rootscope.sessionid,$scope.resid);          }).error(function(err){"err", console.log(err)});     };      $scope.getcart = function (ses,resid) {       if (!angular.isundefined(ses) && !angular.isundefined(resid)) {         $http({           url: "http://localhost/c2api/getcart",           method: 'get',           params: {resid: resid, ses: ses},           headers : {'content-type':'application/x-www-form-urlencoded; charset=utf-8'}         }).success(function(data){            //set cart data           $scope.cart = data;            console.log($scope.cart);// <--- shows data!          }).error(function(err){"err", console.log(err)});       } else {         console.log('error.....');       }     }   }); 

and on view:

<div id="collapsecart" class="slideable">   <div class="panel-body" style="background:#f8f8f8">     {{cart}}   </div> 

when put var in $scope.cart on load... show on view.. reason not update

//update when use $rootscope.cart = data , show {{$root.cart}} ... data show.....

the problem {{cart}} on view in separate scope. check out scope inheritance understand phenomenon. keep view's scope muddling controller's scope, either use controller syntax (preferred) or define $scope.cart further in on controller.

i.e. use $scope.order.cart in controller , {{order.cart}} on view.