Angular: how add event change on select (jQuery-UI combobox select)?

Question

HTML:

<select style='width:60px;' combobox>
     <option ng-repeat='item in sizePriceWeighArr' value='{{ item.id }}' price='{{ item.price }}' weight='{{ item.weight }}' size='{{ item.size }}'>{{ item.size }}</option>
</select>

JS:

.controller('productController', ['$scope', '$location', '$http', '$q', '$window', '$stateParams', function($scope, $location, $http, $q, $window, $stateParams) {
    // Some code here to form array of products
    $scope.sizePriceWeighArr = productObj.sizePriceWeigh;
}])
.directive('combobox', function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            $(element).combobox();                              
        }
    }
})

In directive I form an jQuery-UI combobox select. But I need somehow to catch change event on select, on controller or in directive.

Answer 1

You are currently using a select, so why not just use ngChange:

<select style='width:60px;' combobox ng-change="changeFunction()">
<option ng-repeat='item in sizePriceWeighArr' value='{{ item.id }}' 
price='{{ item.price }}' weight='{{ item.weight }}' size='{{ item.size }}'>    
{{ item.size }}</option>
</select>

js:

.controller('productController', ['$scope', '$location', '$http', '$q', '$window', '$stateParams', function($scope, $location, $http, $q, $window, $stateParams) {
// Some code here to form array of products
$scope.sizePriceWeighArr = productObj.sizePriceWeigh;

function changeFunction(){
    //your code.
}
}])
.directive('combobox', function() {
return {
    restrict: 'A',
    link: function($scope, element, attrs) {
        $(element).combobox();                              
    }
}
})