Ngrepeat within a directive

See more:

Javascript

AngularJs

Hi,

I want to have a common control for selecting suppliers. I tried getting the suppliers in the isolated scope. The method called and updated the array but the ng-repeat didn't update. So I tried passing through the suppliers as a datasource. Again, the ng-repeat does not update.

Surely this is possible. What Am I missing?

Current Directive:

angular.module('cpDirectives', [])
    .directive('chooseASupplier', function () {
    return {
        restrict: 'EA', 
        scope: {
            callback: '&',
            dataSource : '='
        },
        templateUrl: "/Resources/htmlTemplates/ChooseASupplier.html"
    };
});

and template:

<div class="choose-supplier">
    <h1>
        Choose a Supplier
    </h1>
    <div class="supplierIconClass" ng-repeat="supplier in suppliers" ng-click="callback(supplier.Id)">
        <img ng-src="~/Resources/images/supplier/{{supplier.EalId}}" ng-alt="{{supplier.Name}}" ng-title="{{supplier.Name}}"/>
    </div>
</div>

Usage:

<script>
    
    masterApp.controller('uploaderController',['$scope',function($scope) {
        

        $scope.suppliers = [];

        $scope.$parent.rateHub.run("getSuppliersSafe")
        .then(function (response) {
            if (response.error) {
                if (response.hasOwnProperty("errorDetail")) {
                    console.log(response.errorDetail)
                }
                $scope.error(response.error);
            } else {
                $scope.suppliers = response.data;
            }
        });

        $scope.supplierChoice = function(supplierId) {
            
        }

    }])

</script>

<style>
    
    .wizard-panel {
        width: 98%;
        height: 98%;
        margin: 1%;
        padding: 1%;
        background-color: #eeeeee;
        background-color: rgba(238,238,238,.4
</style>

<div ng-controller="uploaderController">
    
    <div class="wizard-panel">
        <div class="wizard-page page-1">
            <choose-a-supplier callback="supplierChoice(supplierId)" dataSource="suppliers"></choose-a-supplier>
        </div>
    </div>
</div>

What I have tried:

I tried with the isolated scope, but still nothing:

angular.module('cpDirectives', [])
    .directive('chooseASupplier', function () {
      
        var controller = ['$scope', function ($scope) {

            $scope.suppliers = [];

            $scope.$parent.rateHub.run("getSuppliersSafe")
            .then(function(response) {
                if (response.error) {
                    if (response.hasOwnProperty("errorDetail")) {
                        console.log(response.errorDetail)
                    }
                    $scope.error(response.error);
                } else {
                    $scope.suppliers = response.data;
                }
            });
    }];    
      
    return {
        restrict: 'EA', //Default for 1.3+
        scope: {
            callback: '&'
        },
        controller: controller,
        templateUrl: "/Resources/htmlTemplates/ChooseASupplier.html"
    };
});

<div class="choose-supplier">
    <h1>
        Choose a Supplier
    </h1>
    <div class="supplierIconClass" ng-repeat="supplier in vm.suppliers" ng-click="callback(supplier.Id)">
        <img ng-src="~/Resources/images/supplier/{{supplier.EalId}}" ng-alt="{{supplier.Name}}" ng-title="{{supplier.Name}}"/>
    </div>
</div>