title: AngularJS Material mdDialog and display locals in a template
body: <p>Part of the controller which spawn <code>mdDialog</code> looks like</p>
  
  <pre><code>$scope.removeAttendee = function(item) {
  
      console.log(item);
  
      $mdDialog.show({
          controller: DialogController,
          templateUrl: 'views/removeMsg.tmpl.html',
          parent: angular.element(document.body),
          clickOutsideToClose:true,
          controllerAs: 'ctrl',
          fullscreen: $scope.customFullscreen, // Only for -xs, -sm breakpoints.
          locals: {item: item}
      })
  </code></pre>
  
  <p>and controller for <code>mdDialog</code>:</p>
  
  <pre><code>function DialogController($scope, $mdDialog) {
  
      var attendee = this;
  
      $scope.hide = function() {
          $mdDialog.hide();
      };
  
      $scope.cancel = function() {
          $mdDialog.cancel();
      };
  
      $scope.save = function(response) {
          $mdDialog.hide(response);
      };
  
      $scope.remove = function(response) {
          $mdDialog.hide(response);
      };
  
  }
  </code></pre>
  
  <p><code>removeMsg.tmpl.html</code> has that code</p>
  
  <pre><code>&lt;p&gt;You are going to remove {{ ctrl.item.firstName }} {{ ctrl.item.lastName }} from the lunch list.&lt;/p&gt;
  </code></pre>
  
  <p>But I'm not able to display related values even when I will change code to something simple like </p>
  
  <pre><code>locals { item: "test" }
  </code></pre>
  
  <p>and related part to</p>
  
  <pre><code>{{ ctrl.item }}
  </code></pre>
  
  <p>Any suggestions why I'm not getting display those values?</p>