передача данных между контроллерами
 

Здраствуйте. подскажите как передать инфу между контролерами.

Мне надо кликнуть на

<div class="slide slick-slide slick-active" ng-click="????" >
        <p class="category-title">Платья, юбки</p>
    </div>

в контроллере CategoryController , categoriesSection бло

и чтоб в другом (соседнем контроллере) ProductController отрисовались другие товары из product-card. Делал через фабрику - не получаеться. Прошу помощи, спасибо

<div id="container" ng-controller="MainController as main">
  <categories-section class="section" ng-controller="CategoryController as tab"></categories-section>

  <content-section class="section">
        <div class="container" ng-controller="ProductController as productController">
          <div class="row">
            <div class="col-md-6" ng-repeat="x in productController.productDetails">
              <product-card></product-card>
            </div>
          </div>
        </div>
    </content-section>
</div>

categoriesSection:

<div class="btn-group btn-switch categories-switch">
   <label class="btn btn-success" ng-class="{active:tab.isSet(1)}" ng-click="tab.setTab(1)"> Чистка </label>
   <label class="btn btn-success" ng-class="{active:tab.isSet(2)}" ng-click="tab.setTab(2)"> Стирка </label>
</div>

<div ng-show="tab.isSet(1)">    
    <div class="slide slick-slide slick-active" ng-click="????" >
        <p class="category-title">Платья, юбки</p>
    </div>
    <div class="slide slick-slide slick-active" ng-click="????" >
        <p class="category-title">Платья, юбки</p>
    </div>
</div>
<div ng-show="tab.isSet(2)">    
    <div class="slide slick-slide slick-active" ng-click="????" >
        <p class="category-title">Платья, юбки</p>
    </div>
    <div class="slide slick-slide slick-active" ng-click="????" >
        <p class="category-title">Платья, юбки</p>
    </div>
</div>

product-card

<div class="row">
   <div class="col-sm-12 col-xs-6">
      <h2 class="product-price">{{x.price * x.counter}}р.</h2>
   </div>
   <div class="col-sm-12 col-xs-6">
      <div class="input-group count-selector">
         <div class="counter-value"  ng-class="{'not-empty':x.counter > 1 }" > {{x.counter}} <span></span></div>
         <span class="input-group-btn">
         <button class="btn btn-warning" ng-click="productController.counterInc($index);">+</button>
         </span>
      </div>
   </div>
</div>

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

order.controller('MainController', function () {});

order.directive('productCard', function(){
    return {
        restrict: 'E',
        templateUrl: 'product-card.html'
    };    
});

order.controller('ProductController', function (ProductService) {

    this.productDetails = ProductService.getDetails();

    var self = this;
    this.counterInc = function(index){
        self.productDetails[index].counter += 1;
    };
    this.counterDec = function(index){
        self.productDetails[index].counter -= 1;
    };
});

order.service('ProductService', function () {
    var productDetails = [
        {
            name : 'Пиджак',
            price: '590',
            options: {
                opt1: 'Химчистка',
                opt2: 'Отпаривание'
            },
            counter: 1
        },
        {
            name : 'Пиджак сложный',
            price: '890',
            options: {
                opt1: 'Химчистка',
                opt2: 'Отпаривание'
            },
            counter: 1
        }
    ];
    this.getDetails = function () {
        return productDetails;
    }
});

order.directive('categoriesSection', function(){
    return {
        restrict: 'E',
        templateUrl: 'categories-section.html'
    };
});

order.controller('CategoryController', function () {
    this.tab = 1;
    this.setTab = function (tabId) {
        this.tab = tabId;
    };
    this.isSet = function (tabId) {
        return this.tab === tabId;
    };
});

mariklozik,
Можно сделать через ProductService.

То есть хранить состояние на уровне сервиса.

<content-section class="section">
        <div class="container" ng-controller="ProductController as productController">
		
		<p ng-repeat='product in productController.service.filteredProduct'>
			{{product}}
		</p>
		
          <div class="row">
            <div class="col-md-6" ng-repeat="x in productController.productDetails">
              <product-card></product-card>
            </div>
          </div>
        </div>
    </content-section>

order.service('ProductService', function () {
    var productDetails = [
        {
            name : 'Пиджак',
            price: '590',
            options: {
                opt1: 'Химчистка',
                opt2: 'Отпаривание'
            },
            counter: 1
        },
        {
            name : 'Пиджак сложный',
            price: '890',
            options: {
                opt1: 'Химчистка',
                opt2: 'Отпаривание'
            },
            counter: 1
        }
    ];
	
	this.filteredProduct = [];
	
    this.getDetails = function () {
        return productDetails;
    };
	
	this.setProduct = function () {
		this.filteredProduct = ['Продукт ' + Math.random()];
	}
	
});

order.controller('ProductController', function (ProductService) {

    this.productDetails = ProductService.getDetails();
	
	this.service = ProductService;

    var self = this;
    this.counterInc = function(index){
        self.productDetails[index].counter += 1;
    };
    this.counterDec = function(index){
        self.productDetails[index].counter -= 1;
    };
});

order.controller('CategoryController', function (ProductService) {
    this.tab = 1;
    this.setTab = function (tabId) {
        this.tab = tabId;
    };
    this.isSet = function (tabId) {
        return this.tab === tabId;
    };
    this.productService = ProductService;
});

Когда кликаем на

<div class="slide slick-slide slick-active" ng-click="tab.productService.setProduct()" >
        <p class="category-title">Платья, юбки</p>
    </div>

вызывается функция setProduct и в ней уже производить фильтрацию productList. А другой шаблон контроллер будет выводить эту часть состояния из сервиса (твои отфильтрованные продукты).

destus,
Спасибо, все работает!

Подскажите еще пож. ,голова уже не варит, как для каждого

<div class="slide slick-slide slick-active" ng-click="tab.productService.setProduct()" >
    <p class="category-title">Платья, юбки</p>
</div>

сделать свой набор продуктов

order.service('ProductService', function () {
    var productDetails = [
        {
            name : 'Пиджак',
            price: '590',
            options: {
                opt1: 'Химчистка',
                opt2: 'Отпаривание'
            },
            counter: 1
        },
        {
            name : 'Пиджак сложный',
            price: '890',
            options: {
                opt1: 'Химчистка',
                opt2: 'Отпаривание'
            },
            counter: 1
        }
    ];
    this.filteredProduct = [];
    this.getDetails = function () {
        return productDetails;
    };
    this.setProduct = function () {
        this.filteredProduct = ['Продукт ' + Math.random()];
    };
});

mariklozik,
Ну тут надо уже над моделью думать, откуда эти данные должны браться(БД и т.д.), когда пользователь нажимает на "Платья, юбки".

destus,
хочу чтоб json'ом приходили,но сначала хотя б статические данные сделать в рамках обучения )

Ребятка помогите, без вас никак)

Не понимаю, чем тебе помочь. Я не знаю какая у тебя модель данных и какова логика фильтрации товаров.

destus, Нету модели, пока в сервисе есть, я хочу сделать статичные json файлы чтоб там были товары, потом при клике, они какбы приходили (потом ето допилю), както так