<!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 */