Angular Material Layout

by masa671

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script type="text/ng-template" id="jsonProvider.html">
  <div>I am a jsonProvider.</div>
</script>
<script type="text/ng-template" id="imageProvider.html">
  <div>I am an imageProvider.</div>
</script>
<div id='main' ng-cloak>
  <div layout="column" ng-controller="layerProvider">
    <md-input-container style="width:90%">
      <label>Provider Data</label>
      <md-select ng-model="provider" ng-change="providerWasChanged()">
        <md-option><em>None</em></md-option>
        <md-option ng-repeat="provider in providers" ng-value="provider">
          {{provider.displayNmae}}
        </md-option>
      </md-select>
    </md-input-container>
    <provider> </provider>
  </div>
</div>

JavaScript

angular.module('MapApp', ['ngMaterial', 'ngMessages'])
  .directive('provider', ['$compile', '$http', '$templateCache', function($compile, $http, $templateCache) {

    var getTemplate = function(contentType) {
      var template,
        templateMap = {
          jsonProvider: 'jsonProvider.html',
          imageProvider: 'imageProvider.html'
        };

      return $templateCache.get(templateMap[contentType]);
    }

    var linker = function(scope, element, attrs) {
      scope.$watch(function() {
        return scope.$parent.provider;
      }, function(newVal, oldVal, scope) {
        if (newVal !== undefined) {
          loader();
        }
      });

      function loader() {
        if (scope.$parent.provider && typeof(scope.$parent.provider) !== 'string') {
          var html = getTemplate(scope.$parent.provider.name);

          element.html(html);
          $compile(element.contents())(scope);
        }
      }
      loader();
    }

    return {
      transclude: true,
      restrict: 'E',
      scope: {
        provider: '@'
      },
      link: linker
    };
  }]).controller('layerProvider', function($scope, $timeout, $mdSidenav, $mdDialog, $mdMedia, $mdToast) {
    $scope.provider = '';
    $scope.providers = [{
      name: 'jsonProvider',
      displayNmae: "jsonProvider"
    }, {
      name: 'imageProvider',
      displayNmae: "imageProvider"
    }];
    this.providerWasChanged = function() {

    }
  })