AngularJS $ scope not updated in DOM

Question

I have the following codes:

State (allows you to just make it short for simplicity)

.state('foo', {
    url: '/foo',
    templateUrl: 'path/to/template.html',
    controller:'fooCtrl',
})

Controller

controller = function($scope){
    // not the actual code
    $scope.barCount
}

template.html

<div>
    <span>{{ barCount }}</span> // this is updating properly
</div>

Other html parts

<div ng-controller="fooCtrl">
    <span>{{ barCount }}</span> // this is **NOT** updating properly
</div>

I have a variable scopeon my controller. Two-way binding works fine on a template that was declared statewith the controller. But not on another partial template where I bound the controllerwith the help of ng-controller.

It's some kind of mistake? Or am I missing something? Thanks.

Answer 1

, . , ng- , , . - , , . :

angular.module('app')

.factory('fooService', [function(){
  var bar = 'Shared Data';
  return {
    getBar: function(){
      return bar;
    }
  };
}])

.controller('FooController', ['fooService', function(fooService){
  this.barCount = fooService.getBar();
  // or use $scope.barCount = fooService.getBar();
}];