What's the difference between using function and using inline expression to set scope variable

Question

I found some differences between executing function and using expression to set variable, specifically, it seems that ng-if fails to detect the changes made by expr

Answer 1

It is because ng-if directive creates a child scope. So ng-if="editingProfile" is the editing profile object on the parent which gets inherited to the child scope created by the ng-if. That is what gets displayed @ Editing {{editingProfile.name}}<br>. When you do ng-click="editingProfile=false" you are actually updating the child scope's inherited version of editingProfile which does not gets reflected in the one at the parent. But when you do ng-click="backToList()" The function is in the controller and so the $scope.editingProfile refers to the one on the controller (parent) hence that change is reflected and ng-if becomes falsy and it hides the content.

You could solve this my adding one more level in the scope property hierarchy.

angular.module("testApp", []).controller("editCtrl",
    function ($scope){
      $scope.model = {};
      $scope.model.editingProfile = null;
      $scope.edit = function() {
          $scope.model.editingProfile = {
              name: "test"
          };
      }
      $scope.backToList = function() {
          $scope.model.editingProfile = null;
      }
    }    
)

and

<div ng-if="model.editingProfile">Editing {{model.editingProfile.name}}
    <br> <a ng-click="backToList()">click to execute function to go back</a>

    <br/> <a ng-click="model.editingProfile=null">click to set variable to go back(NOT working)</a> 
</div>

Fiddle