multiple datepicker with differents formats, initialized by $http

<!doctype html>
<html ng-app="datepickerBasicUsage">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.css">
  <script src="script.js"></script>
</head>

<body>

  <div ng-controller="AppCtrl" style='padding: 40px;'>
    <form>
      <md-content>
        <h4>Dynamic format date-picker</h4>
        <div ng-if="dateLoaded">
          <div ng-repeat="field in datas">
            <md-datepicker ng-model="myDate" md-date-locale="locales[field.id]"></md-datepicker>
          </div>
        </div>
      </md-content>
    </form>
  </div>
</body>

</html>

angular.module('datepickerBasicUsage', ['ngMaterial'])
  .controller('AppCtrl', function($scope, $timeout, $http) {
    $scope.format = 'L';
    $scope.myDate = new Date();
    $scope.locales = [];

    function buildLocale(format) {
      return {
        formatDate: function(date) {
          return moment(date).isValid() ? moment(date).format(format) : '';
        }
      }
    }

    function load() {
      $http.get('data.json').then(function(data) {
        $scope.datas = data.data;
        angular.forEach($scope.datas, function(item) {
          $scope.locales[item.id] = buildLocale(item.format);
        })
        $scope.dateLoaded = true;
      });
    }

  
    load();
  })

/* Styles go here */

[{
  "id": "date1",
  "format": "MM/DD/YYYY"
}, {
  "id": "date2",
  "format": "MM/DD/YYYY"
}, {
  "id": "date3",
  "format": "DD/MM/YYYY"
}]