node.js - Angularjs storing $scope variable -

i'm building web app using yeoman angular-fullstack. i'm confused how update $scope variables once change made, results automatically displayed on html page without refresh.

html

<h1 class="page-header">drugs:</h1> <div class="row">     <div class="col-sm-4 col-sm-offset-4">         <div ng-repeat="current in alldrugs">                 <p>                 <a href="/edit={{current._id}}"> <button class="btn btn-default" type="button">{{current.name}}</button></a>                 <a ng-click="delete(current)"><button class="btn btn-default" type="button">delete</button></a>               </p>            </div>     </div>   </div>  

controller.js

'use strict';  angular.module('firstapp')   .controller('mainctrl', function ($scope, $http) {     $scope.alldrugs = [];      $http.get('/api/drugs').success(function(alldrugs) {       $scope.alldrugs = alldrugs;     });      $scope.delete = function(thing) {       $http.delete('/api/drugs/' + thing._id);       $http.get('/api/drugs').success(function(alldrugs) {         $scope.alldrugs = alldrugs;       });     };   }); 

when $scope.delete called, item deleted, page not reflect changes until refresh page. i'm thinking has scope of http callback function. appreciated, thanks.

the problem both $http.delete , $http.get called asynchronously.

when $http.get called, $http.delete hasn't been finished yet. have ensure called after delete.

this code work, although not elegant solution:

$scope.delete = function(thing) {   $http.delete('/api/drugs/' + thing._id).success(function(){         //the called after delete         $http.get('/api/drugs').success(function(alldrugs) {            $scope.alldrugs = alldrugs;         });   }); };