title: How to add btorfs multiselect placeholder change default text Select to Select Country?
body: <p>Please give me solution how to add placeholder in  btorfs multiselect Angular js?</p>
  
  <p>My Coding.</p>
  
  <pre><code> &lt;multiselectdrop ng-model="blogadd.country" options="countryList"  display-prop="country_name" search-limit="countryListCount" id-prop="country_name" show-select-all="true" show-unselect-all="true" name="country" header-text="Select Stuff1" required ng-change="check_blogcountry(blogadd.country)"&gt;
                              &lt;/multiselectdrop&gt;
  </code></pre>
  
  <p>Am checked header-text and header it's not Working,Once i add header means got error like below,</p>
  
  <pre><code>multiselect] asking for template on: &lt;header  got error like these
  
  (function () {
  'use strict';
  
     var multiselect = angular.module('btorfs.multiselect',     ['btorfs.multiselect.templates']);
  
  multiselect.getRecursiveProperty = function (object, path) {
      return path.split('.').reduce(function (object, x) {
          if (object) {
              return object[x];
          } else {
              return null;
          }
      }, object)
  };
  
     multiselect.directive('multiselectdrop', ['$filter', '$document', '$log', '$interval', function ($filter, $document, $log, $interval) {
      return {
          restrict: 'AE',
          scope: {
              options: '=',
              displayProp: '@',
              idProp: '@',
              searchLimit: '=?',
              selectionLimit: '=?',
              showSelectAll: '=?',
              showUnselectAll: '=?',
              showSearch: '=?',
              searchFilter: '=?',
              disabled: '=?ngDisabled'
          },
             require: 'ngModel',
        templateUrl: 'multiselect.html',
        link: function ($scope, $element, $attrs, $ngModelCtrl) {
              $scope.selectionLimit = $scope.selectionLimit || 0;
              $scope.searchLimit = $scope.searchLimit ;
  
              $scope.searchFilter = '';
  
              if (typeof $attrs.disabled != 'undefined') {
                  $scope.disabled = true;
              }
  
              $scope.toggleDropdown = function () {
                  $scope.open = !$scope.open;
              };
  
              var closeHandler = function (event) {
                  if (!$element[0].contains(event.target)) {
                      $scope.$apply(function () {
                          $scope.open = false;
                      });
                  }
              };
  
              $document.on('click', closeHandler);
  
              var updateSelectionLists = function () {
                  if (!$ngModelCtrl.$viewValue) {
                      if ($scope.selectedOptions) {
                          $scope.selectedOptions = [];
                      }
                      $scope.unselectedOptions = angular.copy($scope.resolvedOptions);
                  } else {
                      $scope.selectedOptions = $scope.resolvedOptions.filter(function (el) {
                          var id = $scope.getId(el);
                          for (var i = 0; i &lt; $ngModelCtrl.$viewValue.length; i++) {
                              var selectedId = $scope.getId($ngModelCtrl.$viewValue[i]);
                              if (id === selectedId) {
                                  return true;
                              }
                          }
                          return false;
                      });
                      $scope.unselectedOptions = $scope.resolvedOptions.filter(function (el) {
                          return $scope.selectedOptions.indexOf(el) &lt; 0;
                      });
                  }
              };
  
              $ngModelCtrl.$render = function () {
                  updateSelectionLists();
              };
  
              $ngModelCtrl.$viewChangeListeners.push(function () {
                  updateSelectionLists();
              });
  
              $ngModelCtrl.$isEmpty = function (value) {
                  if (value) {
                      return (value.length === 0);
                  } else {
                      return true;
                  }
              };
  
              var watcher = $scope.$watch('selectedOptions', function () {
                  $ngModelCtrl.$setViewValue(angular.copy($scope.selectedOptions));
              }, true);
  
              $scope.$on('$destroy', function () {
                  $document.off('click', closeHandler);
                  if (watcher) {
                      watcher(); // Clean watcher
                  }
              });
  
              $scope.getButtonText = function () {
                  if ($scope.selectedOptions &amp;&amp; $scope.selectedOptions.length === 1) {
                      return $scope.getDisplay($scope.selectedOptions[0]);
                  }
                  if ($scope.selectedOptions &amp;&amp; $scope.selectedOptions.length &gt; 1) {
                      var totalSelected;
                      totalSelected = angular.isDefined($scope.selectedOptions) ? $scope.selectedOptions.length : 0;
                      if (totalSelected === 0) {
                          return 'Select';
                      } else {
                          return totalSelected + ' ' + 'selected';
                      }
                  } else {
                      return 'Select';
                  }
              };
  
              $scope.selectAll = function () {
                  $scope.selectedOptions = $scope.resolvedOptions;
                  $scope.unselectedOptions = [];
              };
  
              $scope.unselectAll = function () {
                  $scope.selectedOptions = [];
                  $scope.unselectedOptions = $scope.resolvedOptions;
              };
  
              $scope.toggleItem = function (item) {
                  if (typeof $scope.selectedOptions === 'undefined') {
                      $scope.selectedOptions = [];
                  }
                  var selectedIndex = $scope.selectedOptions.indexOf(item);
                  var currentlySelected = (selectedIndex !== -1);
                  if (currentlySelected) {
                      $scope.unselectedOptions.push($scope.selectedOptions[selectedIndex]);
                      $scope.selectedOptions.splice(selectedIndex, 1);
                  } else if (!currentlySelected &amp;&amp; ($scope.selectionLimit === 0 || $scope.selectedOptions.length &lt; $scope.selectionLimit)) {
                      var unselectedIndex = $scope.unselectedOptions.indexOf(item);
                      $scope.unselectedOptions.splice(unselectedIndex, 1);
                      $scope.selectedOptions.push(item);
                  }
              };
  
              $scope.getId = function (item) {
                  if (angular.isString(item)) {
                      return item;
                  } else if (angular.isObject(item)) {
                      if ($scope.idProp) {
                          return multiselect.getRecursiveProperty(item, $scope.idProp);
                      } else {
                          $log.error('Multiselect: when using objects as model, a idProp value is mandatory.');
                          return '';
                      }
                  } else {
                      return item;
                  }
              };
  
              $scope.getDisplay = function (item) {
                  if (angular.isString(item)) {
                      return item;
                  } else if (angular.isObject(item)) {
                      if ($scope.displayProp) {
                          return multiselect.getRecursiveProperty(item, $scope.displayProp);
                      } else {
                          $log.error('Multiselect: when using objects as model, a displayProp value is mandatory.');
                          return '';
                      }
                  } else {
                      return item;
                  }
              };
  
              $scope.isSelected = function (item) {
                  if (!$scope.selectedOptions) {
                      return false;
                  }
                  var itemId = $scope.getId(item);
                  for (var i = 0; i &lt; $scope.selectedOptions.length; i++) {
                      var selectedElement = $scope.selectedOptions[i];
                      if ($scope.getId(selectedElement) === itemId) {
                          return true;
                      }
                  }
                  return false;
              };
  
              $scope.updateOptions = function () {
                  if (typeof $scope.options === 'function') {
                      $scope.options().then(function (resolvedOptions) {
                          $scope.resolvedOptions = resolvedOptions;
                          updateSelectionLists();
                      });
                  }
              };
  
              // This search function is optimized to take into account the search limit.
              // Using angular limitTo filter is not efficient for big lists, because it still runs the search for
              // all elements, even if the limit is reached
              $scope.search = function () {
                  var counter = 0;
                  return function (item) {
                      if (counter &gt; $scope.searchLimit) {
                          return false;
                      }
                      var displayName = $scope.getDisplay(item);
                      if (displayName) {
                          var result = displayName.toLowerCase().indexOf($scope.searchFilter.toLowerCase()) &gt; -1;
                          if (result) {
                              counter++;
                          }
                          return result;
                      }
                  }
              };
  
  
              $interval(function(){
                  $scope.resolvedOptions = $scope.options;
                  updateSelectionLists();
              },2000);
  
              $scope.resolvedOptions = [];
              if (typeof $scope.options !== 'function') {
                  $scope.resolvedOptions = $scope.options;
              } else {
                  $scope.updateOptions();
              }
  
          }
      };
  }]);
  </code></pre>
  
  <p>}());</p>
  
  <pre><code> angular.module('btorfs.multiselect.templates', ['multiselect.html']);
  
  angular.module("multiselect.html", []).run(["$templateCache",      function($templateCache) {
   $templateCache.put("multiselect.html",
   "&lt;div class=\"btn-group\" style=\"width: 100%\"&gt;\n" +
  "    &lt;button type=\"button\" class=\"form-control btn btn-default btn-block dropdown-toggle\" ng-click=\"toggleDropdown()\" ng-disabled=\"disabled\"&gt;\n" +
  "        {{getButtonText()}}&amp;nbsp;&lt;span class=\"caret\"&gt;&lt;/span&gt;\n" +
  "    &lt;/button&gt;\n" +
  "    &lt;ul class=\"dropdown-menu dropdown-menu-form\"\n" +
  "        ng-style=\"{display: open ? 'block' : 'none'}\" style=\"width: 100%; overflow-x: auto\"&gt;\n" +
  "\n" +
  "        &lt;li ng-show=\"showSelectAll\"&gt;\n" +
  "            &lt;a ng-click=\"selectAll()\" href=\"\"&gt;\n" +
  "                &lt;span class=\"glyphicon glyphicon-ok\"&gt;&lt;/span&gt; Select All\n" +
  "            &lt;/a&gt;\n" +
  "        &lt;/li&gt;\n" +
  "        &lt;li ng-show=\"showUnselectAll\"&gt;\n" +
  "            &lt;a ng-click=\"unselectAll()\" href=\"\"&gt;\n" +
  "                &lt;span class=\"glyphicon glyphicon-remove\"&gt;&lt;/span&gt; Unselect All\n" +
  "            &lt;/a&gt;\n" +
  "        &lt;/li&gt;\n" +
  "        &lt;li ng-show=\"(showSelectAll || showUnselectAll)\"\n" +
  "            class=\"divider\"&gt;\n" +
  "        &lt;/li&gt;\n" +
  "\n" +
  "        &lt;li role=\"presentation\" ng-repeat=\"option in selectedOptions\" class=\"active\"&gt;\n" +
  "            &lt;a class=\"item-selected\" href=\"\" ng-click=\"toggleItem(option); $event.stopPropagation()\"&gt;\n" +
  "                &lt;span class=\"glyphicon glyphicon-remove\"&gt;&lt;/span&gt;\n" +
  "                {{getDisplay(option)}}\n" +
  "            &lt;/a&gt;\n" +
  "        &lt;/li&gt;\n" +
  "        &lt;li ng-show=\"selectedOptions.length &gt; 0\" class=\"divider\"&gt;&lt;/li&gt;\n" +
  "\n" +
  "        &lt;li ng-show=\"showSearch\"&gt;\n" +
  "            &lt;div class=\"dropdown-header\"&gt;\n" +
  "                &lt;input type=\"text\" class=\"form-control input-sm\" style=\"width: 100%;\"\n" +
  "                       ng-model=\"searchFilter\" placeholder=\"Search...\" ng-change=\"updateOptions()\"/&gt;\n" +
  "            &lt;/div&gt;\n" +
  "        &lt;/li&gt;\n" +
  "\n" +
  "        &lt;li ng-show=\"showSearch\" class=\"divider\"&gt;&lt;/li&gt;\n" +
  "        &lt;li role=\"presentation\" ng-repeat=\"option in unselectedOptions | filter:search() | limitTo: searchLimit\"\n" +
  "            ng-if=\"!isSelected(option)\"\n" +
  "            ng-class=\"{disabled : selectionLimit &amp;&amp; selectedOptions.length &gt;= selectionLimit}\"&gt;\n" +
  "            &lt;a class=\"item-unselected\" href=\"\" ng-click=\"toggleItem(option); $event.stopPropagation()\"&gt;\n" +
  "                {{getDisplay(option)}}\n" +
  "            &lt;/a&gt;\n" +
  "        &lt;/li&gt;\n" +
  "\n" +
  "        &lt;li class=\"divider\" ng-show=\"selectionLimit &gt; 1\"&gt;&lt;/li&gt;\n" +
  "        &lt;li role=\"presentation\" ng-show=\"selectionLimit &gt; 1\"&gt;\n" +
  "            &lt;a&gt;{{selectedOptions.length || 0}} / {{selectionLimit}} selected&lt;/a&gt;\n" +
  "        &lt;/li&gt;\n" +
  "\n" +
  "    &lt;/ul&gt;\n" +
  "&lt;/div&gt;");
  </code></pre>
  
  <p>}]);</p>
  
  <p>Attached My directive coding,Please give me solution how to add placeholder once user give assign default-text in directive call in html tags or else select tag</p>