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

[RFTaurus]

Bug, feature 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.

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)

[EdricChan03]

Please post your question on the AngularJS Material repo or on StackOverflow with the angularjs-material tag.

[RFTaurus]

thankyou, then i will close the issue in here since i think i post in the wrong forum

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}