Passing parameter from view to controller to factory in AngularJS

Question

I'm fairly new to AngularJS using bootstrap. I have the following HTML:

<div ng-controller="BrandCompanyController">
    <tabset>
        <tab ng-repeat="brand in brands" heading="{{brand.Name}}" active="brand.active" disable="brand.Disabled">
            <div ng-controller="ModelController" ng-init="init(brand.ID)">

                <accordion>
                    <accordion-group heading="{{model.model_name}}" ng-repeat="model in models">
                        INSERT DATA HERE
                    </accordion-group>
                </accordion>


            </div>

        </tab>

    </tabset>
</div>

The BRAND tabs are created, however, the list of models are not created. I'm trying to pass the brand ID into the Model Controller using ng-init.

My ModelController looks like:

myApp.controller('ModelController', ['$scope', 'ModelFactory',
    function ($scope, ModelFactory) {


        $scope.init = function(id)
        {
            $scope.brandId = id;
            console.log("Inside Init: " + $scope.brandId);

        }

        console.log("Outside Init: " + $scope.brandId);


        getModels($scope.brandId);

        function getModels(brandId) {

            ModelFactory.GetModels(brandId)
                .success(function (mdls) {
                    $scope.models = mdls;
                    console.log($scope.mdls);
                })
                .error(function (error) {
                    $scope.status = 'Unable to load model data: ' + error.message;
                    console.log($scope.status);
                });
        }
    }]);

and my Factory:

myApp.factory('ModelFactory', ['$http', function ($http) {

    var ModelFactory = {};
    ModelFactory.GetModels = function (id) {

            return $http({
            method: 'GET',
            url: '/models/GetModels',
            params: { brandId: id }
        });
    };

    return ModelFactory;

}]);

The $scope.init in the ModelController sets $scope.brandId. Immediately after that, before the call to GetModels, the $scope.brandId value is undefined. What am I doing wrong here?

Answer 1

Your $scope.init is being called after your controller is loaded. Move the getModels($scope.brandId) call inside that function:

$scope.init = function(id) {
    $scope.brandId = id;
    console.log("Inside Init: " + $scope.brandId);
    getModels(id);
}

This happens because first, the JS is loaded and run. $scope.init gets defined, console.log("Outside Init: " + $scope.brandId); is called, and the getModels function is called.
Then, the HTML finishes loading. Around that time, ng-init="init(brand.ID)" is executed.

Answer 2

Use this on view:

ng-click="functionName(model.id)"

For Controller Use:

$scope.functionName = function(id) {
    restservice.post( '', "api/v1/.../?id=" +id).then(function(response) {
        if (response != null && response.success) {
            $scope.responseMessage = response.message;
        }
    });
}