Angular dart switches not model bound

Question

I have an Angular Dart component with the following html:

EDIT: For some reason, some of my html did not copy correctly. outside the label tag I have:

<div class="btn-group btn-group-vertical" data-toggle="buttons">

`

    <label ng-repeat="item in items" class="btn btn-primary btn-sm btn-block" ng-show="isItemVisible(item)">

        <input type="radio" name="options" value="{{item}}" ng-model="selected">{{item}}
            <span class="badge pull-right"><span class="glyphicon glyphicon-ok"></span></span>

    </label>
</div>`

However, this never updates the model. I also tried using onclick, ng-click and ng-change with the same result - functions are never called. Is there some kind of directive that I am using incorrectly?

Answer 1

Use Future in yours ng-clickso that it can be updated.

    <input type="radio" name="options" value="{{item}}" 
         ng-model="selected" ng-click="radioButtonClicked();">{{item}}</input>

   //Component Code:
   void radioButtonClicked(){
            new Future((){
                //Use your selected model here.
            });
   }

Answer 2

$ parent should do the trick. Here is a working example:

HTML

<div>
  <div ng-repeat="item in items">
    <label for="{{item.name}}">{{item.name}}:</label>
    <input id="{{item.name}}" type="radio" ng-model="$parent.$parent.selected" ng-value="item.value" />
  </div>

  <strong>Selected value:</strong> {{$parent.selected}} <br/>
</div>

controller

$scope.items = [{
  name:'Item1',
  value: 'value1'
}, {
  name:'Item2',
  value: 'value2'
}, {
  name:'Item3',
  value: 'value3'
}];

$scope.selected = null;