Wijmo 5 - AngularJS directives

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20152.70/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20152.70/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20152.70/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20152.70/styles/themes/wijmo.theme.darkly.min.css">
<div ng-app="app" ng-controller="appCtrl" class="container">
  <div aa-notify style="position: fixed; bottom: 25px; right: 25px;"></div>
  
  <button ng-click= "unselectallitems()">
  Reset
  </button>
  <form name="form1" class="form">


    <div class="form-group">
      <div class="form-group">
        <label>Multi select using checkedItems property</label>
        <br />
        <wj-multi-select name="checkedItemsCombo" control="ctx.multiselect" ng-model="checkedItemsComboValue" items-source="checkedItemsComboData" display-member-path="name" checked-member-path="selected">
        </wj-multi-select>
        <br /> checkedItemsComboValue: <b>{{checkedItemsComboValue}}</b>
        <br /> checkedItemsComboCheckedItems: {{ctx.multiselect.checkedItems}}
        <br /> checkedItemsComboSelectedValue: {{ctx.multiselect.selectedValue}}
      </div>


    </div>

  </form>
</div>

CSS

.container {
  padding: 15px 0;
}

JavaScript

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

// controller
app.controller('appCtrl', function($scope) {

  $scope.ctx = {
    multiselect: null
  };
  $scope.$watch('ctx.multiselect', function() {
    if ($scope.ctx.multiselect != null) {

      $scope.ctx.multiselect.selectedValue=null;
 
      if ($scope.ctx.multiselect.onCheckedItemsChanged != null) {
        $scope.ctx.multiselect.onCheckedItemsChanged = function() {


        }
      }
    }

  });;




$scope.unselectallitems=function()
{

$scope.ctx.multiselect.checkedItems=[];
$scope.ctx.multiselect.selectedItem=null;
}

  $scope.checkedItemsComboData = [{
    id: 101,
    name: 'Apple Inc',
    lastPrice: 98.38
  }, {
    id: 102,
    name: 'Amazon.com, Inc.',
    lastPrice: 320.00
  }, {
    id: 103,
    name: 'Google Inc.',
    lastPrice: 585.81
  }, {
    id: 104,
    name: 'Yahoo Inc.',
    lastPrice: 35.68
  }, ];

  $scope.indexComboData = [{
    id: 101,
    name: 'Apple Inc',
    lastPrice: 98.38
  }, {
    id: 102,
    name: 'Amazon.com, Inc.',
    lastPrice: 320.00
  }, {
    id: 103,
    name: 'Google Inc.',
    lastPrice: 585.81
  }, {
    id: 104,
    name: 'Yahoo Inc.',
    lastPrice: 35.68
  }, ];

  $scope.dataWithSelected = [{
    id: 101,
    name: 'Apple Inc',
    lastPrice: 98.38,
    selected: "true"
  }, {
    id: 102,
    name: 'Amazon.com, Inc.',
    lastPrice: 320.00
  }, {
    id: 103,
    name: 'Google Inc.',
    lastPrice: 585.81,
    selected: "false"
  }, {
    id: 104,
    name: 'Yahoo Inc.',
    lastPrice: 35.68,
    selected: "amazing"
  }, {
    id: 105,
    name: 'Microsoft Inc.',
    lastPrice: 100.98,
    selected: ""
  }, {
    id: 106,
    name: 'Macrosoft Inc.',
    lastPrice: 1.02,
    selected: false
  }, {
    id: 107,
    name: 'Data General Inc.',
    lastPrice: 0.02,
    selected: true
  }, ];

});