title: AngularJs Directive for crossbrowser SELECT Dropdown
body: <p>I'm trying to create below Cross-browser dropdown:</p>
  
  <p><a href="http://gyazo.com/60e56f9d8feba4eea79cbea4b1b9b35b" rel="nofollow noreferrer"><img src="https://i.gyazo.com/60e56f9d8feba4eea79cbea4b1b9b35b.png" alt="Gyazo"></a></p>
  
  <p>Currently this is my HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var myapp = angular.module('myapp', []);
  myapp.controller('myCtrl', function($scope) { //temporory stuff
  
    $scope.investments = [{
      "name": "AARPOperatingFunds"
    }, {
      "name": "SomeBigTitle"
    }, {
      "name": "IhatezIE8"
    }, {
      "name": "ILoveFFDeveLoperEdition"
    }, {
      "name": "GiveMeSomeLove"
    }];
    
    $scope.investment = $scope.investments[0].name;
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;div ng-app="myapp" ng-controller="myCtrl"&gt;
  
    &lt;span class="dropdown"&gt;
        &lt;i ng-bind="investment" class="before"&gt;&lt;/i&gt;
        &lt;select ng-model="investment"&gt;
          &lt;option ng-repeat="ip in investments | orderBy:'name' " ng-value="ip.name"&gt;{{ ip.name }}&lt;/option&gt;
        &lt;/select&gt;
      &lt;/span&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But what I need is, when someone selects the Dropdown, <code>ng-bind</code> will update and also</p>
  
  <ol>
  <li>I do <strong>not</strong> want to <strong>add mg-model</strong> each time.</li>
  <li>And main thing is if OPTION value is sometime like this "<strong>AARPOperatingFunds</strong>" it should get displayed as "<strong>AARP Operating Funds</strong>"</li>
  </ol>
  
  <p>Please guide. Can we create any Directive here for the above purpose.</p>
  
  <p>I need something like this:</p>
  
  <pre><code>&lt;span class="dropdown"&gt;
    &lt;i class="before" mySelectDirective&gt;&lt;/i&gt;
    &lt;select id="investProgram" ng-options="ip for ip in ips | orderBy:'ip' "&gt;&lt;/select&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>OR this one:</p>
  
  <pre><code>&lt;span class="dropdown mySelectDirective"&gt;
  &lt;/span&gt;
  </code></pre>