Angular: Select2

http://angularjs.org/

by Kushal Jayswal

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<div ng-controller="MyCtrl">
    <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">
        <option value="">Select Country</option>
    </select>
</div>

CSS

.form-control { width: 100%; opacity: 0 }

JavaScript

var myApp = angular.module('myApp',[])

.directive('select2', function($timeout) {
    return {
        restrict: 'AC',
        link: function(scope, element, attrs) {
            $timeout(function() {
                element.show();
                $(element).select2();
            }); 
        }
    };
})

.controller('MyCtrl', function($scope) {
    $scope.client = {
        primary_address: {
            country: 'France'
        },
        countries: [
            {name: 'France'},
            {name: 'China'},
            {name: 'USA'}
        ]
    };    
});