AngularJS $scope is not updating in DOM

Question

I have the following codes :

The state (lets just make it short for simplicity purposes)

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

The controller

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

template.html

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

Other html partial

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

I have a scope variable on my controller. The 2-way binding is working fine on the template that was declared on the state together with the controller. But not on the other partial template where in I binded the controller using the ng-controller.

Is this some kind of bug? Or am I missing something? Thanks.

I am really new to AngularJS but shouldn't you use `{{ }}` in the div? — shrestha_aj, Jan 16 '16 at 10:30
do you wanted to preserve last value of `count`, and you want it on other state to be same? — Pankaj Parkar, Jan 16 '16 at 10:31
@shrestha_aj oh thanks for pointing that out. Typo mistake. :) — jofftiquez, Jan 16 '16 at 10:37
@PankajParkar I dont really get what you're trying to say but what I wanted is that both template should update accordingly based on the value from the `controller` — jofftiquez, Jan 16 '16 at 10:39
@TheGreenFoxx I wanted to ask that..do you want a variable which value can be shared by multiple controller? — Pankaj Parkar, Jan 16 '16 at 10:41
@PankajParkar basically yes, but I dont want to create an extra `service` for that. Im just wondering why the scope on the other template is not update since they both have the same controller source. — jofftiquez, Jan 16 '16 at 10:43
@TheGreenFoxx no. your guess is wrong..if you are sharing same controller amongst different partials. they both will have new instance of controller.the scope variable change in 1st partial wouldn't replicate in other controller.as they are different instance. you have to create a service to share data in your application — Pankaj Parkar, Jan 16 '16 at 10:46
Ooooooh! Is that so? So basically they are in a different execution context now? That really make sense. Thanks! So I have no choice but to use `services` anyways. Thank you @PankajParkar I owe you. :) — jofftiquez, Jan 16 '16 at 10:48
@TheGreenFoxx service is the choice because they instantiated once by angular framework. that's why service/factory/provider termed as singletone. — Pankaj Parkar, Jan 16 '16 at 10:50
Quick question are both templates run in the context of the same angular module? If you have many modules you would have to include the module that contains fooCtrl as a dependency. Also are there any errors on the console? — Mon Villalon, Jan 24 '16 at 20:49

score 3 · Answer 1 · answered Feb 08 '16 at 23:27

You have one Controller but two instances of that controller. Each time you use ng-controller or declare it in differents views a new instance is created, so all controllers are in differents scopes. The best way to share data between controller are services, because these are singleton, so they have one instance. Example:

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();
}];

AngularJS $scope is not updating in DOM

1 Answers1