Not able to get the value from checklist-value

Question

This is my code.

Markup:

<div ng-repeat="product in Products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4"> 
        <md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index].Name}}</span></md-checkbox>
    </div>
    <div class="col-xs-4"> 
        <md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index+1].Name}}</span></md-checkbox>
    </div>
    <div class="col-xs-4"> 
        <md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index+2].Name}}</span></md-checkbox>
    </div>
</div>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkFirst()">Check first</button>
<button ng-click="setToNull()" ng-if="setToNull">Set to null</button>

Controller:

var pramiseGet = angularService.GetProducts();


       pramiseGet.then(function (pl) {
            $scope.Products = pl.data;
           console.log($scope.Products);
        },

    function (errorPl) {
        $log.error("Error", errorPl);
    });

$scope.roles = {};
    $scope.user = {};
    $scope.sendingID = {};
    $scope.checkAll = function () {
        $scope.user.roles = angular.copy($scope.Products);
    };
    $scope.uncheckAll = function () {
        $scope.user.roles = [];
    };
    $scope.checkFirst = function () {
        $scope.user.roles.splice(0, $scope.user.roles.length);
        $scope.user.roles.push('guest');
    };

What I want to do is when I check the checkbox I need the data to be seen in the below div where the code is

<div class="col-xs-12 col-sm-6">
    <h3>user.roles</h3>
    <pre>{{user.roles|json}}</pre>
</div>

At the moment I'm not getting any data viewd in the above div . Any help

Answer 1

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.Products = [{
    name: 'Product 1',id:1
  }, {
    name: 'Product 2',id:1
  }, {
    name: 'Product 3',id:1
  }, {
    name: 'Product 4',id:1
  }, {
    name: 'Product 5',id:1
  }, {
    name: 'Product 6',id:1
  }, {
    name: 'Product 7',id:1
  }, {
    name: 'Product 8',id:1
  }, {
    name: 'Product 9',id:1
  }, {
    name: 'Product 10',id:1
  }, {
    name: 'Product 11',id:1
  }, {
    name: 'Product 12',id:1
  }];
  $scope.selectedProducts = [];
  $scope.updateSelectedProducts = function(){
  $scope.selectedProducts = $scope.Products.filter(function(e){return e.checked});
  };
  $scope.checkAll = function() {
    $scope.Products.forEach(function(e) {
      e.checked = true
    });
    $scope.updateSelectedProducts();
  }
  $scope.uncheckAll = function() {
    $scope.Products.forEach(function(e) {
      e.checked = false
    });
    $scope.updateSelectedProducts();
  }
  $scope.checkFirst = function() {
    $scope.Products[0].checked = true;
    $scope.updateSelectedProducts();
  }
  $scope.checkAll = function() {
    $scope.Products.forEach(function(e) {
      e.checked = true;
    });
    $scope.updateSelectedProducts();
  }
  $scope.setToNull = function() {
    $scope.Products.forEach(function(e) {
      e.checked = null;
    });
    $scope.updateSelectedProducts();
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <p>
    Selected Products: {{selectedProducts}}</p>
  <div ng-repeat="product in Products track by $index" ng-if="$index%3 == 0" class="row">
    <div class="col-xs-4">
      <input ng-model="Products[$index].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index].name}}</checkbox>
    </div>
    <div class="col-xs-4">
      <input ng-model="Products[$index+1].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index+1].name}}</checkbox>
    </div>
    <div class="col-xs-4">
      <input ng-model="Products[$index+2].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index+2].name}}</checkbox>
    </div>
  </div>

  <button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
  <button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
  <button ng-click="checkFirst()">Check first</button>
  <button ng-click="setToNull()" ng-if="setToNull">Set to null</button>
</br>
</br>
</br>
</br></br>
  
</div>