Not able to bind data in angular js material desgin

Question

I am trying to bind data with dialog box of angular js material design. But not able to bind $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);
  };
}

CODE PEN

I am sorry if there is a silly mistake.Any help will be truly appreciable. Thanks

Answer 1

It indeed was a silly mistake. Happens...

Change the line:

<h2 ng-model="header">{{$scope.header}}</h2>

TO:

<h2 ng-model="header">{{header}}</h2>