JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app='demo' ng-controller='MyCtrl'>
<form>
<select ng-model="shippingMethodId" class="input-full-w normal_dropDown" name="gjh" id="select_shipping_method" >
<option ng-repeat="shippingDetail in shippingDetails" value="{{shippingDetail.shipModeId}}" ng-selected="shippingDetail.shipModeId == '1'">
{{shippingDetail.description}}
Arrives {{shippingDetail.estArrivalDate }}
{{shippingDetail.shipCharge|currency}}
</option>
</select>
<select ng-change="onChangeShippingMethod(shippingMethodId)" ng-model="shippingMethodId"
class="input-full-w normal_dropDown" name="gjh" id="select_shipping_method"
ng-options="sD.shipModeId as format(sD) for sD in shippingDetails">
</select>
</form>
</div>
JavaScript
var demo = angular.module('demo', []);
function MyCtrl ($scope, $filter) {
$scope.format = function(sd){
return sd.description
+ ' Arrives '
+ sd.estArrivalDate + ' '
+ $filter('currency')(sd.shipCharge);
};
$scope.shippingDetails = [
{
"description": "Next Day",
"shipModeId": "11103",
"carrier": "UPS",
"serviceCode": "1DP",
"estArrivalDate": "20140905",
"estArrivalDays": "1",
"type": "Premium",
"shipCharge": "89.92",
"originalShipCharge": "89.92"
},
{
"description": "2nd Day Air",
"shipModeId": "11102",
"carrier": "UPS",
"serviceCode": "2DA",
"estArrivalDate": "20140908",
"estArrivalDays": "2",
"type": "Expedited",
"shipCharge": "65.40",
"originalShipCharge": "65.40"
},
{
"description": "Ground",
"shipModeId": "11101",
"carrier": "UPS",
"serviceCode": "GND",
"estArrivalDate": "20140909",
"estArrivalDays": "3",
"type": "Ground",
"shipCharge": "27.67",
"originalShipCharge": "27.67"
}
];
}