0

FirstController.js

function FirstController($scope) { 
 $scope.$apply(function () {
        $scope.add = function (amount) {
            $scope.counter += amount;
        }
    });}

its view **Addtion.html**

<div ng-controller="FirstController">
    <h4>The simplest add</h4>
    <button ng-click="add(1)" class="button">Add</button>

    <h4>Current count: {{ counter }}</h4>
</div>

its working when calling from this above view

button link on index view outside the this view is following

Index view Index.html

<button ng-controller="FirstController" ng-click=" add(1);">Add</button>

this above button is on main view.. its change in counter is not reflecting in ui why??

Jadli
  • 858
  • 1
  • 9
  • 17
  • possible duplicate of [Using the same controller on different elements to refer to the same object](http://stackoverflow.com/questions/14453216/using-the-same-controller-on-different-elements-to-refer-to-the-same-object) – Henrik N Jun 22 '14 at 09:08
  • A side issue here is $scope.$apply( usage from inside a controller, ALthough this may be just a PoC only, this shall not be done , only place where ever ever scope.$apply may be called shall be your directives – saurshaz Jun 22 '14 at 09:29

1 Answers1

2

Every time you declare ng-controller it creates a new scope. They are effectively separate instances of the same controller type.

If you want them to share a counter you could use the $rootScope, a shared service or emit/broadcast events, for example.

You can read more here: Using the same controller on different elements to refer to the same object

Community
  • 1
  • 1
Henrik N
  • 15,786
  • 5
  • 82
  • 131