title: Slow performance with angular material md-select and ng-repeat
body: <p>I'm writing an enterprise application using angular and angular material and have problem with the performance of a medium sized (in my opinion) form. Especially in IE.</p>
  
  <p>(Working demo, see <a href="https://codepen.io/tkarls/pen/vGrqWv" rel="nofollow">https://codepen.io/tkarls/pen/vGrqWv</a> . Klick on the card title and it pauses slightly before opens. Especially using IE and mobile. Desktop chrome works pretty well.)</p>
  
  <p>The worst offenders in the form seem to be some md-selects with ng-repeat on them.</p>
  
  <pre><code>&lt;md-select ng-model="form.subchannelId" ng-disabled="vm.readOnly"&gt;
      &lt;md-option ng-repeat="id in subchannelIds" value="{{::id}}"&gt;{{::id}}&lt;/md-option&gt;
  &lt;/md-select&gt;
  &lt;md-select ng-model="form.serviceReference" ng-disabled="vm.readOnly"&gt;
      &lt;md-option ng-repeat="id in serviceReferences" value="{{::id}}"&gt;{{::countryId}}{{::id}}&lt;/md-option&gt;
  &lt;/md-select&gt;
  &lt;md-select ng-model="form.audioCodec" ng-disabled="vm.readOnly"&gt;
      &lt;md-option ng-repeat="audioCodec in audioCodecs | orderBy:'toString()'" value="{{audioCodec}}"&gt;{{::systemVariables.encoders.aac[audioCodec].displayName}}&lt;/md-option&gt;
  &lt;/md-select&gt;
  &lt;md-select ng-model="form.audioSource" ng-disabled="vm.readOnly"&gt;
      &lt;md-option ng-repeat="audioSource in audioSources | orderBy:'toString()'" value="{{audioSource}}"&gt;{{audioSource}}&lt;/md-option&gt;
  &lt;/md-select&gt;
  &lt;md-select ng-model="form.padSource" ng-disabled="vm.readOnly"&gt;
      &lt;md-option ng-repeat="padSource in padSources | orderBy:'toString()'" value="{{::padSource}}"&gt;{{::padSource}}&lt;/md-option&gt;
  &lt;/md-select&gt;
  &lt;md-select ng-model="form.lang" ng-disabled="!form.generateStaticPty || vm.readOnly"&gt;
      &lt;md-option ng-repeat="langKey in langKeys | orderBy:'toString()'" value="{{::langs[langKey]}}"&gt;{{::langKey}}&lt;/md-option&gt;
  &lt;/md-select&gt;
  &lt;md-select ng-model="form.pty" ng-disabled="!form.generateStaticPty || vm.readOnly"&gt;
      &lt;md-option ng-repeat="ptyKey in ptyKeys | orderBy:'toString()'" value="{{::ptys[ptyKey]}}"&gt;{{::ptyKey}}&lt;/md-option&gt;
  &lt;/md-select&gt;
  </code></pre>
  
  <p>The data model looks like:</p>
  
  <pre><code>$scope.subchannelIds = [0, 1, 2]; //up to 63 in real life
  $scope.serviceReferences = ["000", "001", "002"]; //up to 999 in real life
  $scope.ptys = {
    "No programme type": 0,
    "News": 1,
    "Current Affairs": 2}; //Up to ~30 in real life
  $scope.ptyKeys = Object.keys($scope.ptys);
  $scope.langs = {
    "Unknown": "00",
    "Albanian": "01",
    "Breton": "02"}; //Up to ~100 in real life
  $scope.langKeys = Object.keys($scope.langs);
  </code></pre>
  
  <p>The other ng-repeats are small with 3-5 items each. I think that a modern browser should handle datasets of this size and render it very quickly. So hopefully I'm doing something wildly wrong with my HTML code. The data is fetched from the server in real life but I do pre-fetch it so once the form is ready to be displayed it is already in the $scope.</p>
  
  <p>I tried to pre-generate HTML after I fetched the data using normal js loops. And then insert just the html snippet like:
      
          {{::preGeneratedHtmlHere}}
      </p>
  
  <p>But then angular would not treat it as html but text...</p>
  
  <p>Any help on how to optimize this is appreciated!</p>