Set initial label in Angular UI dropdown list - angularjs

Question

In this plunker 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?
Javascript
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;
};
});
HTML
<table>
<tr ng-repeat="row in rows">
<td>
<div class="btn-group" uib-dropdown>
<button id="btn-append-to-body" type="button" class="btn btn-primary" uib-dropdown-toggle="">
{{selection}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" ng-click="selectItem($event,$index)" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem">
<a href="#" data-value="1" >The first item</a>
</li>
<li role="menuitem">
Another item
</li>
<li role="menuitem">
Yet another item
</li>
</ul>
</div>
</td>
</tr>
</table>
<br/>
Last selection: {{lastSelection}}

Answer 1

You're missing the row element in your binding
{{row.selection}} instead of {{selection}}
http://plnkr.co/edit/Q5YnByLUKmjkpet2gKWC?p=preview

Answer 2

there is the console error: i is not deifned,
solution is:
$scope.selectItem = function(ev,index) {
var sel = ev.target.textContent;
$scope.lastSelection = index + " - " + sel;
};
also edit button {{row.selection}} .
here is the plunker code without errors.

Answer 3

Try this ;)
In app.js replace
$scope.lastSelection = i + " - " + sel;
with
$scope.lastSelection = index + " - " + sel;
And in index.html replace
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body" ng-click="selectItem($event,$index)">
<li role="menuitem">
<a href="#" data-value="1" >The first item</a>
</li>
<li role="menuitem">
Another item
</li>
<li role="menuitem">
Yet another item
</li>
</ul>
with
<ul class="dropdown-menu" uib-dropdown-menu="" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem">
<a href="#" data-value="1" ng-click="selectItem($event,$index)" >The first item</a>
</li>
<li role="menuitem">
<a href="#" data-value="2" ng-click="selectItem($event,$index)" >Another item</a>
</li>
<li role="menuitem">
<a href="#" data-value="3" ng-click="selectItem($event,$index)" >Yet another item</a>
</li>
</ul>