javascript - Why doesn't Angular update the ng-show status when I use an expression? -

i have no problem getting ng-show work when use scoped variable:

(excerpt html file:)

<li ng-show="hasbattery">   <span>battery</span>   <dl>     <dt>type</dt>     <dd>{{phone.battery.type}}</dd>   </dl> </li> 

using following controller code, works fine:

phonecatcontrollers.controller('phonedetailctrl', ['$scope', '$routeparams', '$http',   function($scope, $routeparams, $http) {      function loaddata() {       // fyi, ?date nonsense below avoid browser cacheing of json file        $http.get('phones/' + $routeparams.phoneid + '.json' + '?' +                  new date().gettime()).success(function(data) {         $scope.phone = data;          $scope.hasbattery = !$scope.isempty($scope.phone.battery.type);         // should call form of $scope.$apply() here? when do,         // digest in progress error. ng-show seems          // update fine without call $apply       });     };      $scope.isempty = function(str) {       var retval = (typeof(str) === undefined || !str || 0 === str.length);       alert("isempty: returning " + retval);       return retval;     };      $scope.hasbattery = false;     loaddata();   } ]); 

like said, works. when view page phone.battery.type undefined or blank, ng-show correctly hides div. when view page phone.battery.type non-empty string, ng-show correctly shows div. good.

here's question: when use !isempty(...) call directly in ng-show expression, instead of using $scope.hasbattery intermediary, it doesn't work.

here's code version:

<li ng-show="{{!isempty(phone.battery.type)}}">   <span>battery</span>   <dl>     <dt>type</dt>     <dd>{{phone.battery.type}}</dd>   </dl> </li> 

controller, hasbattery removed:

phonecatcontrollers.controller('phonedetailctrl', ['$scope', '$routeparams', '$http',   function($scope, $routeparams, $http) {      function loaddata() {       $http.get('phones/' + $routeparams.phoneid + '.json' + '?' + new date().gettime()).success(function(data) {         $scope.phone = data;          // no longer evaluation of isempty here.         // before, i'm not calling $scope.$apply() @       });     };      // same code before     $scope.isempty = function(str) {       var retval = (typeof(str) === undefined || !str || 0 === str.length);       alert("isempty: returning " + retval);       return retval;     };      loaddata();   } ]); 

when load page phone.battery.type non-empty string, want ng-show show, fails show div. see isempty indeed being called after data loads, , correctly returning false (so ng-show's expression, !isempty(...), true). seems angular not doing value of expression!

.

any idea what's going on? think $scope.$apply problem, i've seen elsewhere on so, expression seem being evaluated using date data.

it appears {{ }} notation means angular evaluates , uses expression inside braces once.

sounds either angular changed handling of braces in last year or so, or blog entry i've been using wrong: http://www.whitneyland.com/2013/02/why-does-angularjs-sometimes-use-single-braces-sometimes-double-braces-and-sometimes-no-braces.html

commenters cyril dd, razah , mohammad sepahvand, pointing out dropping {{ }} solves problem.

i'm still surprised angular seems evaluating expression more once -- many times, in fact, evidences 12 or times have dismiss alert() called isempty!

why angular evaluate expression knows it's not going with?