angular scope variable not binding

Question

I have an angular view with a dynamic dropdown. When the user selects one of the options in the list I am trying to set a scope variable. For whatever reason it is not set upon selection. I assume it's an issue with the scope, but I can't figure out what exactly.

app.controller('MyController', function ($scope) {   
    $scope.myType = null;   
    $scope.types = [{name: 'a', isChecked:false}, {name: 'b', isChecked:false}, {name: 'c', isChecked:false}];  
    $scope.doSomething = function() {
       console.log($scope.myType); //null value
    }
}

The view builds the dropdown from the types scope variable. When the user selects one, I set myType to the name value of the selection, but when I try to reference that variable within the controller, its always null.

<div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>
        </li>
    </ul>
</div>

<div ng-click="doSomething()">do something</div>

Davin Tryon · Accepted Answer · 2014-12-22 17:56:07Z

I think that this is a problem of inherited scopes. For every iteration of ng-repeat a new scope is created. That means that myType will be created inside each ng-repeat scope (and not on your controller scope). So, when you are setting myType, you are not referring to the controller's myType.

To get around this either use dot syntax:

js:

app.controller('MyController', function ($scope) {   
    $scope.selected = { myType: null };   
    $scope.types = [{name: 'a', isChecked:false}, {name: 'b', isChecked:false}, {name: 'c', isChecked:false}];  
    $scope.doSomething = function() {
       console.log($scope.myType); //null value
    }
}

html:

<div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="selected.myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="selected.myType == type.name" /><label></label>
        </li>
    </ul>
</div>

Or use $parent:

<div class="btn-group" dropdown>
    <button type="button" dropdown-toggle>
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">  
        <li ng-repeat="type in types" ng-click="$parent.myType = type.name">
            {{type.name}} <input type="checkbox" ng-checked="$parent.myType == type.name" /><label></label>
        </li>
    </ul>
</div>

Alex Zai · Accepted Answer · 2014-12-22 17:09:13Z

0

Make the ng-click event a function:

$scope.setType() {
  $scope.myType = $scope.type.name;
}


<li ng-repeat="type in types" ng-click="setType()">
    {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>
</li>

answered Dec 22, 2014 at 17:09

Alex Zai

1192 silver badges4 bronze badges

1 Comment

Davin Tryon Over a year ago

This will not work because $scope.type will not refer to anything in the controller.

nitin · Accepted Answer · 2014-12-22 18:41:41Z

no need to make setType a function, you button is out of the ng-repeat directive and which result it is not able to bound the scope if you try your div button with in the

tag some where down li, it will work. else every thing looks fine. some thing like this,

<li ng-repeat="type in types" ng-click="myType = type.name">
        {{type.name}} <input type="checkbox" ng-checked="myType == type.name" /><label></label>

 <a href = '' ng-click=doSomething(myType) />Submit
</li>

:)

Collectives™ on Stack Overflow

angular scope variable not binding

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related