javascript - AngularJs :: Load Data In DropDown on base of other Dropdown

Question

Load data in my first dropdown from AngularJS then on the basis of this dropdown i want to generate next dropdown with data from another controller

<ul data-role="listview" data-inset="true">
            <li ng-controller="exerciseCatagoryCtrl">
                <span>Catagory</span>
                <select id="exerciseSuperCategory" data-role="listview" ng-options="catagory as catagory.text for catagory in catagories.cast " ng-model="item" ng-change="update()">
                </select>
            </li>
        </ul>

In JS

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

    myApp.factory('catagories', function () {
    var catagories = {};
    catagories.cast = [{
            value : "exeCatagory_001",
            text : "Indoor"
        }, {
            value : "exeCatagory_002",
            text : "Outdoor"
        }
    ];
    return catagories;
})

myApp.controller('exerciseCatagoryCtrl', function ($scope, catagories) {
    $scope.catagories = catagories;
    $scope.update = function () {
    alert($('#exerciseSuperCategory option:selected').text());
    }
});

so now on the basis of this text that get in ng-change event i want get data from different controller say other controller is

 myApp.factory('types', function () {
    var types = {};
    types.cast = [{
            value : "exeCatagory_001",
            text : "Gym"
        }, {
            value : "exeCatagory_002",
            text : "Sports"
        }
    ];
    return types;
})

myApp.controller('exerciseTypeCtrl', function ($scope, types) {
    $scope.types = types;
    $scope.update = function () {
    alert("Index Changed");
    }
});

so i want this data in other dropdown is user select outdoor from first dropdown i tried different ways but they not working and if user select indoor there will be another controller