jquery - my add function chage in counter value but it's not reflecting on ui , when calling it from index view button add why ? angularjs -

jquery - my add function chage in counter value but it's not reflecting on ui , when calling it from index view button add why ? angularjs -

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 above view

button link on index view outside view following

index view index.html

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

this above button on main view.. alter in counter not reflecting in ui why??

every time declare ng-controller creates new scope. separate instances of same controller type.

if want them share counter utilize $rootscope, shared service or emit/broadcast events, example.

you can read more here: using same controller on different elements refer same object

jquery angularjs