Binding an OBJECT ARRAY to <ul> in AngularJs - angularjs

Question

I am populating a dropdownbutton from a array. The whole key value pair is being shown as you see in the picture.
1) I need to show only the value of Label.
2) I want to have "ALL LOCATIONS" as a default item.
Here is how the Locations look like :
Locations:Array[2]
0:Object
$$hashKey:"object:772"
Id:1600
Label:"California"
__proto__:Object
1:Object
$$hashKey:"object:773"
Id:1600
Label:"Atlanta"
__proto__:Object
HTML :
<div class="btn-group btn-toolbar btn-margin-left" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
ALL LOCATIONS {{selectedItem}}
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label}}</a>
</li>
</ul>
</div>
js :
WotcDashBoardModuleService.GetDashBoardSummary(Ein).then(function (response) {
$scope.Summary = response.data.WotcSummary;
$scope.selectedItem;
$scope.dropboxitemselected = function (item) {
$scope.selectedItem = item;
//alert($scope.selectedItem);
}
console.log($scope.Summary);
});

Answer 1

Summary.Locations is your array of objects, so Label gets bound to each element individually. That means you need to show {{Label.Label}} instead of just {{Label}} and you'll see the name.

Answer 2

This part:
ALL LOCATIONS {{selectedItem}}
Should be replaced with:
<span ng-if="!selectedItem">ALL LOCATIONS</span>
<span ng-if="selectedItem" ng-bind="selectedItem.Label"></span>
Or with:
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>