AngularJS scope will not change inside my controller

Question

I cannot get $scope.loading to update inside in my controllers createProject() function. The scope is changed but the value on page does not update, why? I have tried apply() but this just gives an error:

Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.19/$rootScope/inprog?p0=%24digest
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:6:450
    at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:105:353)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:113:31)
    at http://127.0.0.1:8004/static/js/controllers/project.js:56:27
    at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:100:424)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:102:64
    at k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:112:319)
    at k.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:109:392)
    at k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:113:100) 

HTML:

 <button ng-show="project.new" class="btn btn-primary" ng-click="actionCreateProject()"
                            spinner-button=loading>Create
                    </button>

Directive:

app.directive('spinnerButton', function () {
    return {
        restrict: "A",
        transclude: true,
        template: "<div ng-transclude ng-hide='loading'></div>"
            + "<div ng-show=loading>Not a button!</div>",
        scope: {loading: "=spinnerButton"},
        link: function (scope, elem) {
            elem.bind("click", function () {
                scope.loading = true;
            });
        }
    };
});

inside a controller:

  var createProject = function () {
                var new_project_data = {
                    "title": $scope.project.title,
                    "description": $scope.project.description
                };

                var resource = httpFactory.post("project", new_project_data)


                resource.then(function (object) {



                   $scope.$apply(function(){
                         $scope.loading = false;
                   })


                });


            };

Answer 1

Call $apply in your and you don't need to call $apply in your controller.

  elem.bind("click", function () {
      scope.loading = true;
      scope.$apply();
  });