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>

Answer 1

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>

Answer 2

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>

• Davin Tryon: This will not work because $scope.type will not refer to anything in the controller.

Answer 3

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>

:)