javascript - angular jsマテリアル設計でデータをバインドできません

Question

angular jsマテリアルデザインのダイアログボックスでデータをバインドしようとしています。しかし、バインドすることはできません$scope.header

HTML

    <div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
      <p class="inset">
        Open a dialog over the app's content. Press escape or click outside to close the dialog and
        send focus back to the triggering button.
      </p>
    
      <div class="dialog-demo-content" layout="row" ayout="row" layout-wrap="" layout-margin="" layout-align="center">
        
        <md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
          Custom Dialog
        </md-button>
        
      </div>
      
     
    <script type="text/ng-template" id="dialog1.tmpl.html">

<md-dialog aria-label="Mango (Fruit)"  ng-cloak>
      <form>
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2 ng-model="header">{{$scope.header}}</h2>   // Trying to bind data here
            <span flex></span>
          </div>
        </md-toolbar>
    
        <md-dialog-content>
          <div class="md-dialog-content">
            All contents
          </div>
        </md-dialog-content>
    
        <md-dialog-actions layout="row">
          buttons
        </md-dialog-actions>
      </form>
    </md-dialog>
    </script>
      </div>

js

 angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])

.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
  $scope.status = '  ';
  $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');

  
$scope.showAdvanced = function(ev) {
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;

    $mdDialog.show({
      controller: DialogController,
      templateUrl: 'dialog1.tmpl.html',
      parent: angular.element(document.body),
      targetEvent: ev,
      clickOutsideToClose:true,
      fullscreen: useFullScreen
    })
 };

  
});

function DialogController($scope, $mdDialog) {
  $scope.header="Mango";
  
  $scope.hide = function() {
    $mdDialog.hide();
  };

  $scope.cancel = function() {
    $mdDialog.cancel();
  };

  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
}

コードペン

ばかげた間違いがあれば申し訳ありません。どんな助けでも本当にありがたいです。ありがとう