Edit in JSFiddle

var multiddl = angular.module('multiddl', []);
multiddl.directive('multiselectDropdown', function () {
    return {
        restrict: 'E',
        scope: {
            model: '=',
            options: '=',
        },
        template:
            "<div class='btn-group' data-ng-class='{open: open}' style='width: 200px;'>" +
            "<button class='btn btn-small' style='width: 160px;'>---Select---</button>" +
            "<button class='btn btn-small dropdown-toggle' data-ng-click='openDropdown()' style='width: 40px;' ><span class='caret'></span></button>" +
            "<ul class='dropdown-menu' aria-labelledby='dropdownMenu' style='position: relative;'>" +
            "<li style='cursor:pointer;' data-ng-repeat='option in options'><a data-ng-click='toggleSelectItem(option)'><span data-ng-class='getClassName(option)' aria-hidden='true'></span> {{option.name}}</a></li>" +
            "</ul>" +
            "</div>",

        controller: function ($scope) {

            $scope.openDropdown = function () {

                $scope.open = !$scope.open;

            };

            $scope.selectAll = function () {

                $scope.model = [];

                angular.forEach($scope.options, function (item, index) {

                    $scope.model.push(item);

                });

            };

            $scope.deselectAll = function () {

                $scope.model = [];

            };

            $scope.toggleSelectItem = function (option) {

                var intIndex = -1;

                angular.forEach($scope.model, function (item, index) {

                    if (item.id == option.id) {

                        intIndex = index;

                    }

                });

                if (intIndex >= 0) {

                    $scope.model.splice(intIndex, 1);

                } else {

                    $scope.model.push(option);

                }

            };

            $scope.getClassName = function (option) {

                var varClassName = 'glyphicon glyphicon-remove-circle';

                angular.forEach($scope.model, function (item, index) {

                    if (item.id == option.id) {

                        varClassName = 'glyphicon glyphicon-ok-circle';

                    }

                });

                return (varClassName);

            };

        }
    }

});

multiddl.controller("multiselectddlController", function ($scope) {
    $scope.SelectedCountries = [{
        "id": 1,
            "name": "India"
    }, {
        "id": 3,
            "name": "Japan"
    }, {
        "id": 5,
            "name": "Germany"
    }];
    $scope.MasterCountries = [{
        "id": 1,
            "name": "India"
    }, {
        "id": 2,
            "name": "America"
    }, {
        "id": 3,
            "name": "Japan"
    }, {
        "id": 4,
            "name": "China"
    }, {
        "id": 5,
            "name": "Germany"
    }]
});
<div ng-controller="multiselectddlController">
    <div style="font-weight: bold;">Get Selected Country</div>
    <div data-ng-repeat="country in SelectedCountries">
        <ul>
            <li>{{country.name}}</li>
        </ul>
    </div>
    <multiselect-dropdown model=" SelectedCountries " options="MasterCountries "></multiselect-dropdown>
</div>

              

External resources loaded into this fiddle: