How to send the selected item from the angular -ui drop-down list back to the angular controller

Question

Using angular -ui, consider the following:

<div class="btn-group" dropdown is-open="status.isopen"> <button type="button" class="btn btn-default btn-labeled dropdown-toggle fa fa-location-arrow" dropdown-toggle ng-disabled="disabled"> Location: {{ loc }} <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li ng-repeat="choice in locations"> <a>{{choice}}</a> </li> </ul> </div> 

Application:

 var app = angular.module('Demo', ['ui.router', 'ui.bootstrap']); app.controller('CrmCtrl', ['$scope', function ($scope) { $scope.location = "Sutton Coldfield"; $scope.locations = [ "Sutton Coldfield", "Coventry", "Redditch", "London", "Manchester", "Sheffield", "Dublin" ]; }]); 

The goal is to change the location of the selection as the user selects a new location. that is, the drop-down list starts as "Location: Sutton Coldfield" and, for example, should be updated to "Location: Coventry." I could also use the value in the sidebar, for example.

Example and Plunk: http://plnkr.co/edit/5giYygkYcVDJ6RvCKRMv?p=preview

To do this, I can update $scope.loc , but I cannot figure out how to “connect” or “push” the selected selection back to the controller.

I am also looking for the best way to do this, as I do this primarily for my personal training.

I saw a discussion about using the ng model in element A , but was not busy.

Answer 1

You will need to process it manually, this is just a drop-down menu if you want to use it as a choice. You can simply set ng-click to duplicate items in a dropdown.

 <a ng-click="setChoice(choice)">{{choice}}</a> 

and in your controller:

 $scope.setChoice = function(data){ $scope.loc = data; //Do somethign else.. } 

Plnkr