title: Set initial label in Angular UI dropdown list
body: <p><a href="http://plnkr.co/edit/cjEKaBp0PwE53osLl1kR?p=preview" rel="nofollow">In this plunker</a> I'm trying to get the selection of a list of dropdown lists. The problem is that the dropdowns appear empty (no labels are selected by default, as set in the controller). How to fix this?</p>
  
  <p>Javascript</p>
  
  <pre><code>var app = angular.module('app', ['ui.bootstrap']);
  app.controller('ctl', function ($scope) {
  
      $scope.rows = [ {selection: "Sel 1"}, {selection: "Sel 2"} ];
  
      $scope.selectItem = function(ev,index) {
          var sel = ev.target.textContent;
          $scope.lastSelection = index + " - " + sel;
          $scope.rows[index].selection = sel;
      };
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr ng-repeat="row in rows"&gt;      
        &lt;td&gt;
            &lt;div class="btn-group" uib-dropdown&gt;
              &lt;button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle=""&gt;
                    {{selection}} &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul class="dropdown-menu" ng-click="selectItem($event,$index)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body"&gt;
                 &lt;li role="menuitem"&gt;
                    &lt;a href="#" data-value="1" &gt;The first item&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li role="menuitem"&gt;
                    &lt;a href="#" data-value="2"&gt;Another item&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li role="menuitem"&gt;
                    &lt;a href="#" data-value="3"&gt;Yet another item&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  
    &lt;br/&gt;
  
    Last selection: {{lastSelection}}
  </code></pre>