Loading Data

by Rob Rothe

HTML

<div ng-app="app" ng-controller="ListCtrl as ctrl">
  <div ng-if="!ctrl.list.length">
    Loading list...
  </div>
  <select ng-model="value" style="width: 200px;" ng-options="o.id as o.label for o in ctrl.list" ng-if="ctrl.list.length">
    <option value=""></option>
  </select>
  <hr>
  <select ng-model="value" style="width: 200px;" ng-options="o.id as o.label for o in ctrl.list" ng-disabled="!ctrl.list.length">
    <option value=""></option>
  </select>
</div>

JavaScript

angular
  .module('app', [])
  .controller('ListCtrl', ListCtrl);

function ListCtrl($timeout) {
  var vm = this;
  vm.list = [];
  loadList();

  function loadList() {
    $timeout(function() {
      vm.list = [{
        "id": 1,
        "label": "One"
      }, {
        "id": 2,
        "label": "Two"
      }, {
        "id": 3,
        "label": "Three"
      }]
    }, 2000);
  }
}