<html>
  <head>
  <title>Multiple Select DropDown List with AngularJS</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" type="text/javascript"></script>
  <script src="script.js" type="text/javascript"></script>
  </head>
  <body ng-app="App">
  <div ng-controller="MultiSelectCtrl">
    
    
    
    <div style="float:right">
    <ul class="items-list">
      <li ng-repeat="job in jobs | filter: getSelectedItems">
          {{job.name}}
      </li>
    </ul>
    </div>
    
    <div class="wrapper">
      <div class="selected-items-box">
        --- Choose ---
        <span class="dropdown-icon"></span>
      </div>
      <div class="list">
        <ul class="items-list">
          <li ng-repeat="job in jobs">
            <input type="checkbox" ng-model="job.selected" />
    				<span>{{job.name}}</span>
    			</li>
    		</ul>
    	</div>
    </div>
  </body>
</html>
var app = angular.module('App', []).controller('MultiSelectCtrl', ['$scope',
	function($scope) {
  
    $('.selected-items-box').bind('click', function(e) {
        $('.wrapper .list').slideToggle('fast');
    });
      
    $scope.jobs = [
      {name:'Software Developer'},
      {name:'Software Enginer'},
      {name:'Graphic Designer'},
      {name:'Frontend Developer'},
      {name:'Backend Developer'},
      {name:'Tester'},
      {name:'Android Developer'},
      {name:'IOS Developer'},
      {name:'Lead Enginer'},
      {name:'Bug Maker'},
    ];
    
    $scope.textData = "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus";
    
    $scope.getSelectedItems = function(item){
    	return item.selected;
    };
  }
]).directive('ellipsis', ['$timeout', '$window', function($timeout, $window) {
  return {
    restrict    : 'A',
    scope       : {
        ngBind              : '=',
        ellipsisAppend      : '@',
        ellipsisAppendClick : '&',
        ellipsisSymbol      : '@'
    },
    compile : function(elem, attr, linker) {
        return function(scope, element, attrs) {
          attrs.lastWindowResizeTime = 0;
          attrs.lastWindowResizeWidth = 0;
          attrs.lastWindowResizeHeight = 0;
          attrs.lastWindowTimeoutEvent = null;
          /* State Variables */
          attrs.isTruncated = false;

          function buildEllipsis() {
            if (typeof(scope.ngBind) !== 'undefined') {
                var bindArray = scope.ngBind.split(" "),
                    i = 0,
                    ellipsisSymbol = (typeof(attrs.ellipsisSymbol) !== 'undefined') ? attrs.ellipsisSymbol : '…',
                    appendString = (typeof(scope.ellipsisAppend) !== 'undefined' && scope.ellipsisAppend !== '') ? ellipsisSymbol + '' + scope.ellipsisAppend + '' : ellipsisSymbol;

                attrs.isTruncated = false;
                element.html(scope.ngBind);

                // If text has overflow
                if (isOverflowed(element)) {
                    $(element[0]).dotdotdot();
                }
            }
          }
          function isOverflowed(thisElement) {
              return thisElement[0].scrollHeight > thisElement[0].clientHeight;
          }
          scope.$watch('ngBind', function () {
              buildEllipsis();
          });
          scope.$watch('ellipsisAppend', function () {
              buildEllipsis();
          });
          angular.element($window).bind('resize', function () {
              $timeout.cancel(attrs.lastWindowTimeoutEvent);

              attrs.lastWindowTimeoutEvent = $timeout(function() {
                  if (attrs.lastWindowResizeWidth != window.innerWidth || attrs.lastWindowResizeHeight != window.innerHeight) {
                      buildEllipsis();
                  }

                  attrs.lastWindowResizeWidth = window.innerWidth;
                  attrs.lastWindowResizeHeight = window.innerHeight;
              }, 75);
          });
        };
    }
  };
}]);
body{
  font-size:12px;
  font-family:Arial;
}

.wrapper {
  width: 200px;
  position: relative;
}
.wrapper .selected-items-box {
  cursor: pointer;
  border: solid 1px #ddd;
  padding:10px;
  background-color: #eee;
}
.selected-items-box .items-list {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.selected-items-box .items-list li {
  display: inline;
}

.wrapper .list {
  display: none;
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: solid 1px #C7C6C7;
  border-right: solid 1px #C7C6C7;
  border-bottom: solid 1px #C7C6C7;
  z-index: 100;
  position: absolute;
  width: 100%;
}
.list .items-list {
  list-style-type: none;
  width: 100%;
  padding: 0;
  margin: 0;
}
.list .items-list li {
  margin: 0;
  width: 100%;
  padding: 0;
  border-bottom: solid 1px #C7C6C7;
  padding: 5px;
  background-color: #fff;
}

.ellipses_text {
 font-size: 12px;
 float:left;
 width: 100%;
 overflow: hidden;
 line-height: 1.4em;
 max-height: 100px;
}