Setting angular.js controller variable from within a directive without ngOptions

Question

I want to set the selected option's text to a controller variable exactly like how ngModel does this for the value attribute of the selected option.

<div ng-controller="Subjects as ctrl">
  <select ng-model="ctrl.model.fieldId" text-model="ctrl.model.fieldName">
    <option value="1">yes</option>
    <option value="2">no</option>
  </select>
</div>

how can I set the ctrl.model.fieldName to yes for example if the first option was selected which is not a function from within the directive? this directive have to work alongside ngModel.

I want a way without using ngOptions because I don't have any values array in my javascript, although I can parse the HTML and create one.

This the directive so far:

(function () {
    angular
        .module('app')
        .directive('TextModel', TextModel);
    function TextModel($compile) {
        return {
            restrict: 'A',
            link: function ($scope, elem, attr) {
                elem.on('change', selectChanged);
                $scope.$on('$destroy', function () {
                    elem.off('change', selectChanged);
                });
                function selectChanged() {
                    var selectedText = elem.find('option:selected').text();
                    //YAY! I have the selected option's text
                    console.log(selectedText);
                    //now how can I set ctrl.model.fieldName = selectedText ??
                }
            }
        };
    };

})();

Answer 1

You don't need another directive for that.

It will be better to bind your select options to {key : value} array, or any other objects array

See here : https://docs.angularjs.org/api/ng/directive/ngOptions

Then, you can bind your ng-model to the selected item.

$scope.items = [
    {key : 1 , value : 'yes'},
    {key : 2 , value : 'no'}
]

<select ng-model="selectedItem" ng-options="item as item.value for item in items"></select>

Demo on Jsfiddle

Updated:

If you want to use your own directive for this, you can use isolated scope like this:

function TextModel($compile) {
    return {
        restrict: 'A',
        scope : {
            'textModel' : '='
        },
        link: function (scope, elem, attr ) {
            elem.on('change', selectChanged);
            scope.$on('$destroy', function () {
                elem.off('change', selectChanged);
            });
            function selectChanged() {

                var selectedText = $(elem).find('option:selected').text();
                //YAY! I have the selected option's text

                //now how can I set ctrl.model.fieldName = selectedText ??
                scope.textModel = selectedText;
            }
        }
    };
};

BTW, your directive setter should be:

.directive('textModel', TextModel);

instead of :

.directive('TextModel', TextModel);

Demo on Jsfiddle