JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="test">
    <div ng-controller="MyCtrl">
        <select compo-tree colleges="test" ng-model="choice"></select>
        {{choice}}
        <input ng-model="choice">
        <button ng-click="set()">Set to 1</button>
    </div>
</div>

JavaScript

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

app.directive('compoTree', function($compile) {
        return {
            restrict: 'A',
            scope: {
                colleges: "=colleges",
                choice: "=ngModel"
            },
            link: function($scope, elm){
                var html = "";
                $scope.$watch("colleges", function(){
                    angular.forEach($scope.colleges, function(college) {
                        html += '<optgroup label="' + college.name + '"></optgroup>';
                        angular.forEach(college["departments"], function(department) {
                            html += '<optgroup label="- ' + department.name + '">';
                            angular.forEach(department['disciplines'], function(discipline) {
                                html += '<option value="' + discipline.id + '">' + discipline.name +'</option>'
                            });
                            html += '</optgroup>';
                        });
                    });
                    elm.append($compile(html)($scope));
                });
                $scope.$watch( 'choice', function( val ) {
                    elm.val( val );
                });
            }
        }
});

app.controller("MyCtrl", function($scope){
    $scope.choice = 2;
    $scope.set = function() {
        $scope.choice = 1;
    };
    $scope.test = [{name:"a", departments:[{name:"b", disciplines:[{name:"c", id:"1"},{name:"d", id:"2"}]}]}];
});