I am a beginner in Angularjs and I am facing an issue with updating two $scope variables using separate functions that are called on ng-click.
Although the variables get updated, they do not rebind in the view.
HTML
<div ng-app="">
<div ng-controller="MainCtrl">
<p> <a href="#" ng-click="getDetails();getElse()">Refresh</a> </p>
<p ng-controller="MainCtrl"><span ng-bind="something"></span></p>
<p ng-controller="MainCtrl"><span ng-bind="somethingelse"></span></p>
</div>
</div>
JS function MainCtrl($scope) {
$scope.something = "something";
$scope.somethingelse = "else";
$scope.getDetails = function () {
alert("getdetails before change: "+$scope.something);
$scope.something = 'changed';
alert("getdetails: "+$scope.something);
};
$scope.getElse = function () {
alert("getElse before change: "+$scope.somethingelse);
$scope.somethingelse = 'changed';
alert("getElse: "+$scope.somethingelse);
};
}
I have created a fiddle demonstrating my issue: http://jsfiddle.net/M3pZ8/
Any guidance on the correct approach would be much appreciated.
Thank you!