Getting selected model in angular select directive - angularjs

Question

I've created a directive to display dropdowns (form selects).
However I cannot find a way to mark the selected option.
html form
<div content-selects ng-model="ctrl.contentSelects.riskStatus" selection="oneWMS.riskStatusId"></div> <!-- oneWMS.riskStatusId -->
directive
function contentSelects(){
return {
restrict: 'AE',
templateUrl: '/app/Directives/contentSelects.tpl.html',
replace:true,
scope: {
ngModel: '=',
selection: '='
},
controller:function($scope){
},
link: function (scope, element, attrs) {
scope.selectedModel = scope.ngModel[attrs.selection];
scope.isChanged = function () {
//console.log("changed");
}
element.removeAttr('id');
}
};
}// end function contentSelects
This is where I don't understand: the directive template
<div class="input-group">
<select id="{{id}}">
<option value="model.refId" ng-repeat="model in ngModel track by model.refId" ng-model="ngModel[selection]" >{{model.value}} *** {{selection}} *** {{ngModel[selection]}}</option>
</select>
</div>
In the actual value, {{ngModel[selection]}} gives me exactly what I want (the target model row), but when tied to ng-model it doesn't retrieve anything :/
ng-model="ngModel[selection]"
What is wrong with it? Using curly brackets break it of course...

Answer 1

Your problem is because of ngModel included in option element. You should move it to select element.
Demo
<div class="input-group">
<select ng-model="selectedModel" >
<option ng-value="model" ng-repeat="model in ngModel">{{model}}
</option>
</select>
</div>
And also look at https://docs.angularjs.org/api/ng/directive/ngOptions