title: How to send the selected item from the angular-ui dropdown back to the angular controller
body: <p>Using angular-ui, consider the following:</p>
  
  <pre><code>&lt;div class="btn-group" dropdown is-open="status.isopen"&gt;
    &lt;button type="button" class="btn btn-default btn-labeled dropdown-toggle fa fa-location-arrow" dropdown-toggle ng-disabled="disabled"&gt;
      Location: {{ loc }} &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" role="menu"&gt;
      &lt;li ng-repeat="choice in locations"&gt;
        &lt;a&gt;{{choice}}&lt;/a&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The app:</p>
  
  <pre><code>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"
  ];
  }]);
  </code></pre>
  
  <p>The aim is to get the selection location to change as the user selects a new location. i.e. the dropdown starts like 'Location: Sutton Coldfield' and should update to 'Location: Coventry' for instance. I might also want to use the value in a sidebar for example.</p>
  
  <p>Example and Plunk: <a href="http://plnkr.co/edit/5giYygkYcVDJ6RvCKRMv?p=preview" rel="noreferrer">http://plnkr.co/edit/5giYygkYcVDJ6RvCKRMv?p=preview</a></p>
  
  <p>To achieve this I can update <code>$scope.loc</code> but what I can't figure out is how to 'wire up' or 'push' the selected choice back to the controller. </p>
  
  <p>I'm also looking for a best practice way of doing this as I am doing this primarily for my own personal learning.</p>
  
  <p>I've seen <a href="https://github.com/angular-ui/bootstrap/issues/2671" rel="noreferrer">some discussion</a> about using ng-model on the <code>A</code> element, but it wasn't taken up.</p>