how to show default dropdown value show top angularjs - angularjs

Question

I have a dropdown show below card information and i want to show is_default= true card show top other cards below.. please help me
<select ng-model="approvedinvoicesCtrl.currentcard.card_id">
<option ng-value="item.card_id" ng-repeat="item in approvedinvoicesCtrl.current_job.cards ">{{item.brand +' '+ item.last_digits}}</option>
</select>
{brand:"Visa",
card_id:"card_19VHhAGdj8iWoXDURuRqNH28",
last_digits : 123123,
is_default:true},
{
brand:"Master",
card_id:"card_19VHhAGdj8iWoXDURuRqNH28",
last_digits : 123123,
is_default:false}

Answer 1

Suggesting you with this
<select>
<option ng-value="item.card_id" ng-repeat="item in dropdownval "
ng-selected=item._default >
{{item.brand +' '+ item.last_digits}}</option>
</select>
LIVE DEMO

Answer 2

I will suggest to use ngOptions on option element instead of ng-repeat.
Note: ngOptions provides an facility for the "option" element which should be used instead of ngRepeat when you want the select model to be bound to a non-string value. This is because an option element can only be bound to string values at present. For more information you can check this link.
Working demo with ngOptions :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.current_job = {
"cards": [
{
brand:"Visa",
card_id:"card_19A",
last_digits : 123123,
is_default:true
}, {
brand:"Master",
card_id:"card_19B",
last_digits : 123123,
is_default:false
}
]
};
for (var i in $scope.current_job.cards) {
if ($scope.current_job.cards[i].is_default == true) {
$scope.topCard = $scope.current_job.cards[i].card_id;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-options="item.card_id as item.brand+' '+item.last_digits for item in current_job.cards"
ng-model="topCard">
</select>
</div>
Working demo with ngRepeat :
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function($scope) {
$scope.current_job = {
"cards": [
{
brand:"Visa",
card_id:"card_19A",
last_digits : 123123,
is_default:true
}, {
brand:"Master",
card_id:"card_19B",
last_digits : 123123,
is_default:false
}
]
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select ng-model="currentcard.card_id">
<option ng-value="item.card_id" ng-repeat="item in current_job.cards" ng-selected="item.is_default">{{item.brand +' '+ item.last_digits}}</option>
</select>
</div>

Answer 3

You should use the ng-init and the ng-options for defaults values like:
<select ng-init="somethingHere = options[1]"
ng-model="somethingHere"
ng-options="option for option in options">
</select>
$scope.options = [
'Brand1',
'Brand2',
'Brand3'
];

Answer 4

You can use orderby
<select ng-model="approvedinvoicesCtrl.currentcard.card_id><option ng-value="item.card_id" ng-repeat="item in approvedinvoicesCtrl.current_job.cards | orderBy:'is_default':false">{{item.brand +''+ item.last_digits}}</option></select>
Here item 'is_default' property is sorted in a reversed order. The 2nd argument can be any order function, so you can sort in any rule.
#link http://docs.angularjs.org/api/ng.filter:orderBy

Answer 5

You may prefer pre-selecting the card (option selected) instead of sorting using the default card at the top.
You can use the ng-selected using the default value if no value is selected in ng-model , otherwise, it selects the value in ng-model.
<select ng-model="currentCard.selected" >
<option
ng-value="item.card_id" ng-repeat="item in cards"
ng-selected="(currentCard.selected==item.card_id) || (!currentCard.selected && item.is_default)">
{{item.brand +' '+ item.last_digits}}
</option>
</select>
or you can use the ng-options approach. In this last case, you can pre-select an option using the ng-model value only.
<select
ng-model="currentCard.selected"
ng-options="item.card_id as item.brand+' '+item.last_digits for item in cards">
</select>
See this fiddle with both examples:
https://jsfiddle.net/hdca55cg/
The second one shows default card if you have previously selected in the model.