Есть два контроллера:
app.controller('comboController', function ($scope, $http) {
$http.get("http://InternetShop/php_files/supermarket.php?category=main").
success(function (data) {
$scope.categoryes = data;
console.log($scope.categoryes);
});
$scope.SetCategoryName = function(category){
console.log(category);
$scope.$broadcast('changeVal', category);
};
});
app.controller('tableController', function ($scope, $http) {
$scope.currentCombo = "Meat";
$scope.$on( 'changeVal', function(event, data ) {console.log(data);
$scope.currentCombo = data;
});
GetRequest($scope, $http, $scope.currentCombo);
});
function GetRequest($scope, $http, currentCombo){
$http.get("http://InternetShop/php_files/supermarket.php?category="+currentCombo).
success(function (data) {
$scope.products = data;
console.log($scope.products);
});
}
Логика такова, что при клике по одному из значений выпадающего списка должна обновится таблица. Но ничего не робит. Есть подозрения что я что-то не так с событиями сделал. Вот вьюха:
<div ng-controller="comboController">
<div class="form-group col-sm-2" >
<select class="form-control">
<optgroup ng-repeat="category in categoryes track by $index">
<option ng-click="SetCategoryName(category)">{{category}}</option>
</optgroup>
</select>
</div>
<div class="col-sm-10" ng-controller="tableController">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>Foto</th>
<th>Name</th>
<th>Price</th>
<th>Description</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="product in products track by $index">
<td>{{product.id}}</td>
<td><img alt="alt" src="img/{{product.img}}"/></td>
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.description}}</td>
</tr>
</tbody>
</table>
</div>
</div>