Translating angular strap select icon label

Question

I am trying to solve a translation problem. Image you use the standard angular strap select example in an app:

$scope.selectedIcon = "";
$scope.selectedIcons = ["Globe","Heart"];
$scope.icons = [{"value":"Gear","label":"<i class=\"fa fa-gear\"></i> Gear"},{"value":"Globe","label":"<i class=\"fa fa-globe\"></i> Globe"},{"value":"Heart","label":"<i class=\"fa fa-heart\"></i> Heart"},{"value":"Camera","label":"<i class=\"fa fa-camera\"></i> Camera"}];

How can it be possible, to translate the text (Gear, Globe, Heart ...) in the lable variable using the angular translate?

Answer 1

Ok guys, I think I have solved my problem. For any who is interested in the solution:

Controller:

$scope.selectedSecurityColours = [];
	$scope.securityColours = [{"value":"black","label": {text: "BLACK", icon: '<i class="fa fa-circle fa-circle-black"/>'}},
	                {"value":"green","label": {text: "GREEN", icon: '<i class="fa fa-circle fa-circle-green"/>'}},
	                {"value":"red","label": {text: "RED", icon: '<i class="fa fa-circle fa-circle-red"/>'}},
	                {"value":"blue","label": {text: "BLUE", icon: '<i class="fa fa-circle fa-circle-blue"/>'}},
	                {"value":"silver","label": {text: "SILVER", icon: '<i class="fa fa-circle fa-circle-silver"/>'}},
	                {"value":"gold","label": {text: "GOLD", icon: '<i class="fa fa-circle fa-circle-gold"/>'}}]

View:

<button type="button" class="btn btn-default" ng-model="selectedSecurityColours" data-html="1" data-multiple="1" data-animation="am-flip-x" max-length="4" max-length-html="{{'SELETED' | translate}}" placeholder="{{'CHOOSEAMOUNGTHEFOLLOWING' | translate}}" bs-options="securityColour.value as securityColour.label.icon + ' ' + (securityColour.label.text | translate) for securityColour in securityColours" bs-select>
					</button>

The trick is to properly use the bs-options attribute. I couldn't find any documents, describing my solution, but it seems to work properly.