Why Does This Ng-click Work With A Function, But Not With These Values?

I have the following html:

Solution 1:

Because ng-repeate create new scope and myValue is out of scope. so if you are using controllerAs syntax it works correctly.

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  var vm = this;
  vm.valueList = [{
    key: "A"
  }, {
    key: "B"
  }];
  vm.myValue = vm.valueList[0].key;
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="myApp"ng-controller="AppCtrl as vm"><divclass="btn-group"><buttontype="button"class="btn btn-default dropdown-toggle"data-toggle="dropdown">
        {{vm.myValue}} 
        <spanclass="caret"></span></button><ulclass="dropdown-menu"><ling-repeat="value in vm.valueList"><buttonclass="btn btn-link"ng-click="vm.myValue = value.key">
                {{value.key}}
            </button></li></ul></div></div>

Share

You may like these posts

• 
  Twitter Bootstrap Dropdown Links Not Working
• 
  Bootstrap Validation On Dynamically Adding Multiple Fields
• 
  Why Bootstrap 3 Collapse Is Not Synchronized With Checkbox State On Double Click?
• 
  In React, How Can I Cause Anchors To Do Nothing On Click?