Variable scopes in Angular

Question

I am creating a simple web page registration form in Angular by storing data in Parse.

controller('AppCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {

    $rootScope.groupCreated = false;

    $scope.signUp = function(form) {

        var Group = Parse.Object.extend("AdminOrg");
        var group = new Group();
        group.set("groupName", form.name);
        group.set("groupPassword", form.password);

            group.save(null, {
                  success: function(data) {
                      $rootScope.groupCreated = true;

                  },
                  error: function(data, error) {
                    alert(error.message);
                  }
                });
      };
}]);

I use $ rootScope.groupCreated in my HTML to hide the registration form and show the message "Group successfully created" after calling the success function. The value successfully changes to true, but does not change the appearance of html. I use the following to hide and show two divs:

ng-hide="$rootScope.groupCreated"
ng-show="$rootScope.groupCreated"

Am I accessing $ rootScope incorrectly in my HTML?

Answer 1

Angular , - , Parse Angular, . Angular $apply :

group.save(null, {
    success: function (data) {
        $rootScope.groupCreated = true;
        $rootScope.$apply();
    },
    error: function (data, error) {
        alert(error.message);
    }
});

, vp_arth : $rootScope Agnular:

ng-show="groupCreated"