javascript - Angular updating $scope variable after ajax is not reflecting in UI -

i cannot seem figure out issue here. on ajax success response set value in current controller not reflecting in ui. general answer have found run angular ajax functions and/or apply $apply or $digest $scope. none of these working.

please note in code {{ , }} angular tags replaces <% , %> i'm using blade tempting engine , these tags conflict.

the idea set processing boolean in controller. set true before ajax , false after. problem value not returned false state. running $apply or $digest method both return error: [$rootscope:inprog].

after ajax run

console.log($scope.processing); console.log(this.processing); console.log($scope);

returning

undefind undefind , returns $scope object. within $scope object outputted in console value of processing should (false).

however not reflected in ui still true. clicking toggle button sets processing value false , ui updated. i'm super confused problem is...

html

<div class="panel panel-default" ng-controller="unitofmeasurecontroller uom">           <div class="panel-heading">             <h3 class="panel-title">create new unit of measure</h3>           </div>           <div class="panel-body">             <div ng-hide="uom.processing">            <form ng-submit="uom.processform()" id="new_uom_form">               <div class="form-group">                 <label for="uom_input01">name</label>                 <input ng-model="uom.formdata['name']" type="text" class="form-control" id="uom_input01" placeholder="" name="uom[input01]" value="{{\xsds::old('uom.input01',$values)}}">               </div>                <div style="text-align:right"><button type="submit" class="btn btn-primary" ><i class="fa fa-plus-square"></i> create new unit of measure</button></div>                 </form>                  </div>                 {!!\xsds::angularloader('ng-show="uom.processing"')!!}             </div>             <button ng-click="uom.processing = false">toggle</button>             <%uom.processing%>         </div> 

app.js

(function( ){ var app = angular.module('ingredients',[], function($interpolateprovider) { $interpolateprovider.startsymbol('<%'); $interpolateprovider.endsymbol('%>'); });    app.controller('unitofmeasurecontroller', ['$scope','$http', function($scope,$http) { formdata = []; this.processing = false; this.processform = function( ){     this.processing = true;      $http.get(document.js_root+'/recipe/ingredients/uom/ajax-create').       success(function(data, status, headers, config) {          /* $scope.$apply(function(){               $scope.processing = false;             });*/           console.log($scope.processing);           console.log(this.processing);           console.log($scope);            $scope.processing = false;           if (!data.success) {                 console.log(data.errors);           } else {               console.log('success');           }            //$scope.$digest();           //$scope.$apply(); similar slower         /*  $scope.$apply(function() {               $scope.processing = false;             });*/       }).       error(function(data, status, headers, config) {           $scope.processing = false;          if(document.is_js_dev){              alert(status+' ');          }                   });              return false; }; }]);    })(); 

variable this inside success function of $http.get may not this want anymore. in fact this maybe somebody used know forget !

i have modified code demonstration

 app.controller('unitofmeasurecontroller', [     '$scope',     '$http',      unitofmeasurecontroller ]);  function unitofmeasurecontroller($scope,$http) {     var vm = this;     vm.processing = false;     vm.processform  = processform;      function processform(){         vm.processing = true;          var url = document.js_root+'/recipe/ingredients/uom/ajax-create';         return $http             .get(url)             .success(function() {                 vm.processing = false;                })             .error(function(err) {                 vm.processing = false;             });             }; } 

but think should move $http.get part service, recipeservice or whatever name want.

take @ https://github.com/johnpapa/angular-styleguide best practice angular style. date guide google refer to.