Trying to retrieve the innerHTML of the selected node in options
The
<i class="before"></i>var myapp = angular.module('myapp', []);
myapp.controller('myCtrl', function($scope) {
$scope.investments = [
{"name": "AARP Operating Funds"},
{"name": "Some Big Title"},
{"name": "I hatez IE8"},
{"name": "I Love FF DeveLoper Edition"},
{"name": "Give Me Some Sunshine"}
];
$scope.investment = $scope.investments[0].name;
})
.directive('dropdownSelectBox', function(){
return function(scope, element, attrs) {
//.filter('option[value="' + element.find('select').val() + '"]').text()
console.log(element.find('select').children());
if (element.find('select').val() == '') {
element.find('i').text($('select').eq(0).text());
} else {
element.find('i').text(element.find('select').children()[0].innerHTML);
}
element.find('select').bind('change', function(){
element.find('i').text($(this).find(':selected').text());
});
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">
<span class="dropdown" dropdown-select-box="">
<i class='before'></i>
<select id="timePeriod">
<option value="7" selected="selected">Last 7 Days </option>
<option value="30">Last 30 Days </option>
<option value="60">Last 60 Days </option>
<option value="current">Current Year </option>
<option value="prior">Prior Year</option>
</select>
</span>
<span class="dropdown" dropdown-select-box="">
<i class='before'></i>
<select ng-options="opt.name as opt.name for opt in investments | orderBy:'name'" ng-model="investment"></select>
</span>
</div>