Angular JS вызов функции ui-select on-select не может получить доступ к переменным области видимости $ select

Question

Давайте сделаем это просто

Вот мой контроллер, и я не пишу здесь полную функциональность. просто логическая часть

$scope.added_users = [];
$scope.name = "";
$scope.age = "";
$scope.items = [];
$scope.nationality = "";
$scope.select_nationality = function(data){
    $scope.nationality = data;
    console.log($scope.name);
    console.log($scope.age);
    console.log($scope.nationality);
};
$scope.search_nations = function(data){
     // code for fetching nation data from backend/API
     // Lets say the result of the call is in resp
     $scope.items = resp;
};

Просмотр части (HTML файл)

<div class="form-group">
    <input type="text" ng-model="name" placeholder="Name">
</div>
<div class="form-group">
    <input type="text" ng-model="age" placeholder="Age">
</div>
<div class="form-group">
    <ui-select on-select="select_nationality($item) 
         reach-infinity="search_nations($select) ng-model="nations" theme="theme-data">
        <ui-select-match placeholder="search here">
            <span ng-show="$select.selected">{[{$select.selected.nation_name}]}</span>
        </ui-select-match>
        <ui-select-choices
            refresh="search_nations($select)" refresh-delay="500" repeat="item in items">
            <span>{[{item.nation_name}]}</span>
        </ui-select-choices>
    </ui-select>
</div>

Здесь мы получаем выходные данные в виде начальных значений имени и возраста, ie, нулевой строки и получаем правильный вывод национальности.

Укажите причину этого и предложите мне решение

Заранее спасибо