create table in mdDialog with editable data as json

Question

I'm trying to create dialog with json data.

        $scope.showAttributeData = function(data) {
        $scope.feature = data
        console.log($scope.feature)
        var that = this;
        var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && that.customFullscreen;
        $mdDialog.show({
                locals: {
                    feature: $scope.feature
                },
                controller: attributeDialogController,
                controllerAs: 'attributeDialog',
                templateUrl: 'attribute-dialog.template.html',
                parent: angular.element(document.body),
                clickOutsideToClose: true,
                hasBackdrop: false,
                fullscreen: useFullScreen,
                openFrom: angular.element(document.querySelector('#left')),
                closeTo: angular.element(document.querySelector('#left'))
            });
        $scope.$watch(function() {
            return $mdMedia('xs') || $mdMedia('sm');
        }, function(wantsFullScreen) {
            return that.customFullscreen = wantsFullScreen === true;
        });
    };

but in tempalte data does not reder. It is look like template didn't catch data from controller.

 <script type="text/ng-template" id="attribute-dialog.template.html">
            <md-dialog id="attribute-dialog">
                <md-toolbar>
                    <div class="md-toolbar-tools">
                        <h2>Attribut info</h2>
                        <span flex></span>
                        <md-button class="md-icon-button" ng-click="attributeDialog.close()">
                            <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
                        </md-button>
                    </div>
                </md-toolbar>
                <md-dialog-content>
                    <div class="md-dialog-content">
                        <table>
                            <thead>
                                <tr>
                                    <th>Attr</th>
                                    <th>Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="(key, value) in feature">
                                    <td> {{key}} </td>
                                    <td>
                                        <input type="text" ng-model="feature[key]"/>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </md-dialog-content>
                <md-dialog-actions layout="row">
                    <span flex></span>
                    <md-button type="submit" ng-click="attributeDialog.close()" class="md-raised md-primary">ОК</md-button>
                </md-dialog-actions>
            </md-dialog>
        </script>

So, what it can be? Also, dialog template is rather new, as controller. In future, I will add editable information with ng-model. And, may be somebody know, how it crete correctly? I'm pass info from leaflet map

mainLayer.eachLayer(function(layer) {
        layer.on({
            click: function() {
                var scope = angular.element($("#main")).scope().showAttributeData(layer.feature.properties);
            },
        });
    });

Also, I started to learn angular week ago, and if you notice some error or wrong writing of code, please, write them))

Answer 1

I've created a test example to help you using your markup - CodePen

Markup

<div ng-controller="MyController as vm" ng-cloak="" ng-app="app">
  <md-button class="md-primary md-raised" ng-click="vm.open($event)">
    Custom Dialog
  </md-button>

  <script type="text/ng-template" id="test.html">
        <md-dialog id="attribute-dialog">
        <md-toolbar>
          <div class="md-toolbar-tools">
            <h2>Attribut info</h2>
            <span flex></span>
            <md-button class="md-icon-button" ng-click="attributeDialog.close()">
              <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
            </md-button>
          </div>
        </md-toolbar>
        <md-dialog-content>
          <div class="md-dialog-content">
            <table>
              <thead>
                <tr>
                  <th>Attr</th>
                  <th>Value</th>
                </tr>
              </thead>
              <tbody>
                <tr ng-repeat="(key, value) in feature">
                  <td> {{key}} </td>
                  <td>
                    <input type="text" ng-model="feature[key]"/>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </md-dialog-content>
        <md-dialog-actions layout="row">
          <span flex></span>
          <md-button type="submit" ng-click="attributeDialog.close()" class="md-raised md-primary">ОК</md-button>
        </md-dialog-actions>
      </md-dialog>
  </script>
</div>

JS

angular.module('app',['ngMaterial'])

.controller('MyController', function($scope, $mdDialog) {
  this.open = function(ev) {
    $scope.feature = {
      blah: "blah",
      yah: "yah"
    }
    $mdDialog.show(
      {
        templateUrl: "test.html",
        clickOutsideToClose: true,
        scope: $scope,
        preserveScope: true,
        controller: function($scope) {
       },
    });
  };
})