Multiple Angular Chosen Example using ngModel and ngOptions

var app = angular.module('myApp', ['localytics.directives']);

app.controller('MainCtrl', function($scope, $http) {
  $scope.name = 'Multiple Angular Chosen Example using ngModel and ngOptions';
  $scope.state = {
    selected: [3, 2]
  };
  
  //Static items
  $scope.states = [
    {id: 1, tite: 'Alaska'},
    {id: 2, title: 'Arizona'},
    {id: 3, title: 'Arkansas'},
    {id: 4, title: 'California'}
  ];
  
  //Remote items
  $http({
    method: 'get',
    url: 'http://jsonplaceholder.typicode.com/posts'
  }).success(function(posts) {
    console.log(posts);
    $scope.states = posts;
  });
});

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="chosen@*" data-semver="1.0.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" />
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="chosen@*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
    <script data-require="chosen@*" data-semver="1.0.0" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
    
    <script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
    <script src="https://rawgit.com/leocaseiro/angular-chosen/master/dist/angular-chosen.min.js"></script>
    <style>select {width: 400px;}</style>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>{{name}}</h1>
    <input type="checkbox" ng-model="showChosen" value="1" />
    {{state.selected}}
      <select
        multiple
        ng-if="showChosen"
        chosen
        ng-model="state.selected"
        ng-options="s.id as s.title for s in states">
  <option value=""></option>
</select>
  </body>

</html>