Angularjs ng-click doesn't update view

Question

myApp.controller( 'ModalNewInstanceCtrl', [ '$scope', '$modalInstance', function( $scope, $modalInstance ) {

$scope.tabSelected = 0;

$scope.saveFactor = function () {
    console.log('here');
    $scope.tabSelected = 0;
    console.log($scope.tabSelected);
};

That's my controller.

    <div class="modal-header">
    <div ng-click="tabSelected = 0">Tab 1</div>
    <div ng-click="tabSelected = 1">Tab 2</div>
    <div ng-click="tabSelected = 2">Tab 3</div>

</div>
<div class="modal-body">
    <div ng-show="tabSelected == 0">
        <h3>Some content 1 here</h3>
    </div><div ng-show="tabSelected == 1">
        <h3>Some content 2 here</h3>
    </div>
    <div ng-show="tabSelected == 2">
        <h3>Some content 3 here</h3>
    </div>
</div>
<div class="modal-footer">
        <button ng-click="saveFactor()">Save and return to tab 1</button>
        <a ng-click="tabSelected = 0">Cancel and return to tab 1</a>
    </div>
</div>

And that's my html. I don't know why tabSelected updates view on cancel link with ng-click="tabSelected = 0" changing directly but not inside function saveFactor(). I know that function is called properly because of console log statement. And tabSelected changed as well but not the view. I can't $scope.$apply() inside that function because it's give me an error.

This is likely a scoping issue. I think some code is missing -- could you create a jsfiddle? Simple way to check would be to use an object instead (e.g. tabs.selected = 0, tabs.selected = 1, etc). That would persist through scopes. — Daniel
– Daniel, Commented Sep 17, 2014 at 15:33
You are right. I stripped my code just to show relevant parts. this fiddle jsfiddle.net/Nogostradamus/fz4yx2zj works just fine. Have to find what's wrong in my version. — KrystianC
– KrystianC, Commented Sep 17, 2014 at 16:00
You can inspect your scope variables with batarang in chrome. I think your scope could not find your variable. You can either use dot notation or setter function at the first controller that you create variable tabSelected — engincancan
– engincancan, Commented Sep 17, 2014 at 19:35

SoluableNonagon · Accepted Answer · 2014-09-17 19:15:57Z

1

Change your HTML to use a function when modifying scope variables
HTML:

<div class="modal-header">
<div ng-click="changeTab(0)">Tab 1</div>
<div ng-click="changeTab(1)">Tab 2</div>
<div ng-click="changeTab(2)">Tab 3</div>
...
<div class="modal-footer">
    <button ng-click="saveFactor()">Save and return to tab 1</button>
    <a ng-click="changeTab(0)">Cancel and return to tab 1</a>
</div>

JS:

$scope.tabSelected = 0;

$scope.saveFactor = function () {
    console.log('here');
    $scope.tabSelected = 0;
    console.log($scope.tabSelected);
};
$scope.changeTab= function(tabNum){
    $scope.tabSelected = tabNum;
};

answered Sep 17, 2014 at 19:15

SoluableNonagon

11.8k11 gold badges59 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KrystianC Over a year ago

That works. So I have to stick with just functions and can't mix changing variable directly in the view and in the controller. Once I converted everything to function in controller it worked. Thanks

Collectives™ on Stack Overflow

Angularjs ng-click doesn't update view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related