JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div ng-app="app" id="ng-app" ng-controller="test">
    <select w-foo ng-model="bar" ng-options="o.name for o in options"></select>
    <select ng-foo ng-model="bar" ng-options="o.name for o in options"></select>
    <select my-foo ng-model="bar" ng-options="o.name for o in options"></select>
</div>

JavaScript

var app = angular.module('app', []);

app.controller("test", function ($scope, $timeout) {

    // emulate ajaxed options
    $timeout(function () {
        $scope.options = [{
            name: "aaa",
            id: 1
        }, {
            name: "bbb",
            id: 2
        }, {
            name: "ccc",
            id: 3
        }];
    }, 500);

});

app.directive("wFoo", function () {
    return {
        restrict: "A",
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            var exp = attrs.ngOptions.replace(/.*in /, "");
            console.log(exp);
            scope.$watch(attrs.ngOptions.replace(/.*in /, ""), function () {
                console.log("w-foo ngOptions changed", element.html());
            });
        }
    };
});

app.directive("ngFoo", function () {
    return {
        restrict: "A",
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            scope.$watch(attrs.ngOptions.replace(/.*in /, ""), function () {
                console.log("ng-foo ngOptions changed", element.html());
            });
        }
    };
});

app.directive("myFoo", function () {
    return {
        restrict: "A",
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            scope.$watch(attrs.ngOptions.replace(/.*in /, ""), function () {
                console.log("my-foo ngOptions changed", element.html());
            });

        }
    };
});