What's the main purpose of $scope in AngularJS controller?

Question

Yesterday, I saw my co-worker write a huge controller with only one "god object" $scope that should look like this following code.

myApp.controller('ComplexController', ['$scope', function($scope) {

 $scope.firstTab = {
    init: function () {
      $scope.firstTab.data1.foo = $scope.firstTab.DefaultData1.foo;

      $scope.$watch('firstTab.data1.foo', function (){
        // do something
      });
    },
    defaultData1: {
      foo: 'bar'
    },
    data1: {
      foo: 'bar',
      publiclyUsedMethod1: function () {},
      publiclyUsedMethod2: function () {},
      privatelyUsedMethod1: function () {},
      privatelyUsedMethod2: function () {},
      privatelyUsedMethod3: function () {},
      privatelyUsedMethod4: function () {},
      privatelyUsedMethod5: function () {}
    },
    data2: {
      // Same code pattern as above
    },
    data3: {
      // Same code pattern as above
    },
    data4: {
      // Same code pattern as above
    }
  };

  $scope.secondTab = {
    // Same code pattern as above
  };

  $scope.thirdTab = {
    // Same code pattern as above
  };

  $scope.refresh = function(){
    // do something
  };

  $scope.$watchCollection('[$scope.firstTab.data1.foo, $scope.secondTab.data1.foo, $scope.thirdTab.data1.foo]',function(newValues,oldValues){
    // some logic
    $scope.refresh();
  });

  $scope.firstTab.init();
  $scope.secondTab.init();
  $scope.thirdTab.init();
}]);

What do you think which this pattern? What's the main purpose of $scope object? Is it OK to store every private and public object in $scope object?

Thanks,

possible duplicate of [What are the nuances of scope prototypal / prototypical inheritance in AngularJS?](http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs) — Pankaj Parkar, May 08 '15 at 18:33
no need to put private methods on the scope. Push them off into a service that is available anywhere — charlietfl, May 08 '15 at 18:47
@pankajparkar My question isn't relate to how it work? My question is about what is the best practice for $scope in controller. — , May 08 '15 at 18:50

score 0 · Answer 1 · answered May 08 '15 at 18:36

"Scope is the glue between application controller and the view." (taken from https://docs.angularjs.org/guide/scope).

I don't specialy like that way of coding. I would have put only what I want to access from the view or what I would like to use in a child controller.

score 0 · Answer 2 · answered May 08 '15 at 22:27

Apart from transporting data between view and controller, $scope object is also responsible for observing if any changes (on the model) have occured. Watchers are assigned automatically by Angular on elements included between double curly braces or can be explicitly declared via $scope.$watch() method. $scope is also responsible for propagation of the changes.

Remember that all data assigned to $scope becomes automatically available to view. Therefore assign wisely.

score 0 · Answer 3 · answered May 10 '15 at 02:32

$scope "marries" the controller to the view. $scope is also considered the view-model in mvvm architecture. Not only is storing everything in $scope OK, but that's the beauty of it. Storing everything in the $scope object makes it available to view without having to qualify it with $scope. For example, $scope.foo can be referenced as foo in the view.

What's the main purpose of $scope in AngularJS controller?

3 Answers3