<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" />
  <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery@2.0.3"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
  <script data-require="angular.js@1.4.0-rc.1" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl" ng-app="app">
  <h1>Hello Plunker!</h1>
  <select class="form-control" select2="" name="country" data-ng-model="client.primary_address.country" ng-options="c.name as c.name for c in client.countries" ng-disabled="disabled">
    <option value="">Select Country</option>
  </select>

  <br>
  <br>
  <br>selected: {{client.primary_address}}
  <br>
  <br>
</body>

</html>
// Code goes here
var app = angular.module('app', []);

app.directive("select2", function($timeout, $parse) {
  return {
    restrict: 'AC',
    require: 'ngModel',
    link: function(scope, element, attrs) {
      console.log(attrs);
      $timeout(function() {
        element.select2();
        element.select2Initialized = true;
      });

      var refreshSelect = function() {
        if (!element.select2Initialized) return;
        $timeout(function() {
          element.trigger('change');
        });
      };
      
      var recreateSelect = function () {
        if (!element.select2Initialized) return;
        $timeout(function() {
          element.select2('destroy');
          element.select2();
        });
      };

      scope.$watch(attrs.ngModel, refreshSelect);

      if (attrs.ngOptions) {
        var list = attrs.ngOptions.match(/ in ([^ ]*)/)[1];
        // watch for option list change
        scope.$watch(list, recreateSelect);
      }

      if (attrs.ngDisabled) {
        scope.$watch(attrs.ngDisabled, refreshSelect);
      }
    }
  };
});

app.controller('MainCtrl', function($scope) {
  $scope.client = {
    primary_address: {},
    countries: [{
      name: 'Australia'
    }, {
      name: 'United States'
    }, {
      name: 'United Kingdom'
    }]
  };
  
  
  $scope.newCountryList = [
    { name: "Vietnam" },
    { name: "Singapore" },
    { name: "Japan" }
  ];
});
/* Styles go here */