Why When I passing data from model to modal using $mdDialog its always null?

[RFTaurus]

Bug, enhancement request, or proposal:

Hey, I'm new when using AngularJS, i want to ask about how to use $mdDialog to pass the data from the model, but i got stuck or you can say that when i clicked the button to open the modal, i can't pass the data from the model, I already tried some solustion from the forum but it still return null instead of the list that i want

Detailed Reproduction Steps:

1. Make the model data list appear when clicked the modal

What is the expected behavior?

To make the model data in data.json appear as a list

Reference that i already tried:

Passing data to mdDialog
$mdDialog: locals not working!
Passing Data with MdDialog
MdDialog communication (i.e: passing data to MdDialog)

What is the current behavior?

The list is still return null but when i'm using console.log('data Product',vm.StockOpnameCreateData) it appears as the dummy data around 13 array

stockopnamecreate.json

{
    "dataProduct": [
        {
            "id": "1",
            "SKUID": "A1013593M01",
            "ProductName": "Daging Ayam Berbumbu Rasa Original Plus Tepung Krispy [ 1 Carton ]"
        },
        {
            "id": "2",
            "SKUID": "A1013593M02",
            "ProductName": "Daging Ayam Berbumbu Rasa Pedas Plus Tepung Krispy [ 1 Carton ]"
        },
        {
            "id": "3",
            "SKUID": "A1013593M03",
            "ProductName": "Paha Ayam Frozen Tanpa Tulang [ 1 Carton - 15 Pack x 1Kg ]"
        },
        {
            "id": "4",
            "SKUID": "A1013593M04",
            "ProductName": "Dada Ayam Frozen Tanpa Tulang [ 1 Carton - 15 Pack x 1Kg ]"
        },
        {
            "id": "5",
            "SKUID": "A1013593M05",
            "ProductName": "Ayam Utuh Frozen 0.7-0.8 [ 1 Carton - 15 Ekor ]"
        },
        {
            "id": "6",
            "SKUID": "A1013593M06",
            "ProductName": "Ayam Utuh Frozen 0.8-0.9 [ 1 Carton - 15 Ekor ]"
        },
        {
            "id": "7",
            "SKUID": "A1013593M07",
            "ProductName": "Ayam 0.8-0.9 Kg Potong 10 Bagian [ 1 Carton - 15 ekor ]"
        },
        {
            "id": "8",
            "SKUID": "A1013593M08",
            "ProductName": "Ayam 0.7-0.8 Kg Potong 10 Bagian [ 1 Carton - 15 ekor ]"
        },
        {
            "id": "9",
            "SKUID": "A1013593M09",
            "ProductName": "Ayam Utuh Frozen 0.6-0.7 [ 1 Carton - 20 Ekor ]"
        },
        {
            "id": "10",
            "SKUID": "A1013593M10",
            "ProductName": "Daging Ayam Berbumbu Rasa Original Plus Tepung Krispy [ 1 Carton - 10 Pack ]"
        },
        {
            "id": "11",
            "SKUID": "A1013593M11",
            "ProductName": "Daging Ayam Berbumbu Rasa Pedas Plus Tepung Krispy [ 1 Carton - 10 Pack ]"
        },
        {
            "id": "12",
            "SKUID": "A1013593M12",
            "ProductName": "Chicken Drum Stick dan Tepung Krispy [ 1 Carton - 10 Pack x 10 Pcs ]"
        }

    ]

}

Modal

<md-dialog aria-label="Select Product">
  <form>

    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>Select Product</h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon md-font-icon="icon-close" class="s25"></md-icon>
        </md-button>
      </div>
    </md-toolbar>

    <md-divider></md-divider>    

    <md-toolbar style="background-color: white; border-bottom: solid 1px #e0e0e0;">
      <md-input-container md-no-float class="md-block" style="margin-left: 1vw;">
        <md-icon md-font-icon="icon-magnify" class="s25" style="color: black"></md-icon>
        <input type="text" placeholder="Search Product Name or SKU ID" style="width: 45vw;">
      </md-input-container>
    </md-toolbar>
    
    <md-dialog-content style="max-width:800px;max-height:810px; padding: 0px;">

      <!-- Data User -->

      <md-list>

        <md-list-item style="border-bottom: solid 1px #e0e0e0;" ng-repeat="data in vm.StockOpnameCreateData">
          <md-checkbox></md-checkbox>
          <div layout="column">
            <p style="color: #aaaaaa; font-size: 0.9em; margin-bottom: -1vh; margin-top: 0vh;"> {{data.SKUID}} </p>              
            <p style="font-weight: bold;"> {{data.ProductName}} </p>              
          </div>
        </md-list-item>

      </md-list>
            
    </md-dialog-content>
    
    <md-dialog-actions layout="row">
      <md-button class="md-raised md-primary" style="color: white; background-color: #f44336;" ng-click="answer('not useful')">Cancel</md-button>
      <md-button class="md-raised md-primary" style="color: white; background-color: #4baf4f;" ng-click="answer('useful')">Add</md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

Stockopname.html

<div id="stock-project" class="page-layout simple right-sidenav" layout="row" style="min-height: 150vh">
    
    <!-- CENTER -->
    <div class="center" flex ms-scroll>

        <!-- HEADER -->
        <div class="header detail-header">

            <div layout="column" layout-align="space-between">
                <div class="margin-top-30" layout="row">

                        
                    <div style="padding-right: 4vw; margin-left: 1vw;">

                        <div layout="row">

                            <div layout="column" style="padding-right: 2vw;">
                                <md-button ng-click="vm.gotoStockOpnameData()">
                                    <md-icon md-font-icon="icon-arrow-left" class="s40"></md-icon>
                                </md-button>
                            </div>
                                
                            <span class="md-display-1" style="color: #4a4a4a; font-weight: bold; padding-top: 1vh">New Stock Opname</span>
                            
                            <md-button class="md-raised btn-header" style="background-color:#4baf4f; color: white; float:left; margin-top: 55px; margin-left: -390px;" ng-click="vm.showTabDialog($event)">Add Product</md-button>                              

                        </div>

                    </div>

                </div>
            </div>

        </div>
        <!-- / HEADER -->    

        <!-- CONTENT -->

        <div class="page-layout simple tabbed" layout="column">

            <!-- TABLE CONTENT -->

            <div class="order-detail-form-container products md-background-bg md-whiteframe-1dp">
                <table class="dataTable row-border hover" datatable="ng" dt-instance="vm.dtInstance"
                        dt-options="vm.dtOptions">
                    <thead>
                        <tr>
                            <th class="secondary-text">
                                <div class="table-header">
                                    <span class="column-title">SKU ID</span>
                                </div>
                            </th>
                            <th class="secondary-text">
                                <div class="table-header">
                                    <span class="column-title">Product Name</span>
                                </div>
                            </th>
                            <th class="secondary-text">
                                <div class="table-header">
                                    <span class="column-title">Expiry Date</span>
                                </div>
                            </th>
                            <th class="secondary-text">
                                <div class="table-header">
                                    <span class="column-title">Quantity</span>
                                </div>
                            </th>
                            <th class="secondary-text">
                                <div class="table-header">
                                    <span class="column-title">New Quantity</span>
                                </div>
                            </th>
                            <th class="secondary-text">
                                <div class="table-header">
                                    <span class="column-title">Notes</span>
                                </div>
                            </th>
                            <th class="secondary-text">
                                <div class="table-header">
                                    <span class="column-title">&nbsp</span>
                                </div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>

                        <!-- Data User -->
                        <tr ng-repeat="data in vm.StockOpnameCreateData">
                            <td>{{data.SKUID}}</td>
                            <td>{{data.ProductName}}</td>
                            <td>14 Jan 2018</td>
                            <td>4</td>
                            <td>
                                <md-input-container md-no-float class="md-block">
                                    <input type="text" placeholder="Input New Quantity Here">
                                </md-input-container>
                            </td>
                            <td>
                                <md-input-container md-no-float class="md-block">
                                    <input type="text" placeholder="Input Note Here">
                                </md-input-container>
                            </td>
                            <td>
                                <md-button class="edit-button md-icon-button">
                                    <md-icon md-font-icon="icon-trash" class="s16"></md-icon>
                                </md-button>
                            </td>
                        </tr>
                        
                        <!-- Data User -->

                    </tbody>
                
                </table>

                <div class="pagination" layout="column" layout-align="space-between">
                    <div layout="row" layout-align="center">
                        <md-button class="md-raised md-primary" style="color: white; background-color: #f44336;">Cancel</md-button>
                        <md-button class="md-raised md-primary" style="color: white; background-color: #4baf4f;">Replace</md-button>
                    </div>
                </div>

            </div>

            <!-- / TABLE CONTENT -->

        </div>
        <!-- / CONTENT -->

    </div>
    <!-- / CENTER -->    
</div>

Controller

(function ()
{
    'use strict';

    angular
        .module('app.stockopname')
        .controller('StockOpnameCreateController', StockOpnameCreateController);

    /** @ngInject */
    function StockOpnameCreateController($scope, $mdDialog, $state, StockOpnameCreateData)
    {
        var vm = this;
        var id = Number;

        // Data
        vm.gotoStockOpnameData = gotoStockOpnameData;
        vm.showTabDialog = showTabDialog;
        vm.StockOpnameCreateData = StockOpnameCreateData.dataProduct;
        console.log('Kelinci Vito',vm.StockOpnameCreateData);

        // Methods
        function gotoStockOpnameData()
        {
            $state.go('app.stockopname.data');
        }

        function showTabDialog(event) {
            $mdDialog.show({
                locals:{dataToPass: $scope.StockOpnameCreateData},
                controller: DialogController,
                templateUrl: '/app/main/stockopname/views/stockopnamecreate/productList.html',
                parent: angular.element(document.body),
                clickOutsideToClose:true
            })
        };

        function DialogController($scope, dataToPass) {
            $scope.StockOpnameCreateData = dataToPass;
            
            $scope.hide = function() {
              $mdDialog.hide();
            };
        
            $scope.cancel = function() {
              $mdDialog.cancel();
            };
        
            $scope.answer = function(answer) {
              $mdDialog.hide(answer);
            };
        }

        //////////
    }
})();

I have some thought about the condition:

1. Maybe my syntax is wrong (But i already check it for some times)
2. Flow for the model data (But when i just put the list on the stockopnamecreate its appear but not with the modal)

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.10
• AngularJS Material: 1.1.9
• OS: Windows 10
• Browsers: Chrome Version 67.0.3396.99 (Official Build) (64-bit)

[Splaktar]

Why are you using $scope here instead of vm -> locals:{dataToPass: $scope.StockOpnameCreateData}?

Thank you for taking the time to submit this issue. However there are better avenues for troubleshooting or asking for help with your app. These include Stack Overflow, Gitter, the AngularJS Material forums, etc.

Please limit GitHub issues to bug reports and enhancement requests.