Actions across partial views on a shared controller not firing

Question

I have several pieces of reusable code that I am trying to separate. The problem I am having is that two are directly related but are on different parts of the page and I would like them to be in separate partial views, so I have two partial views that share the same angular controller.

Html: Partial View 1:

<div ng-controller="CustomerController" data-ng-init="init()">
<div class="col-md-2 col-md-offset-5" style="outline: 1px solid black; margin-top: 1%">
    <div class="text-center">
        <div class="radio-inline" ng-repeat="customerOption in customerOptions">
            <input type="radio" id="{{customerOption.Value}}" name="customer" ng-change="getCustomers(customerType)" ng-model="customerType" ng-value="customerOption.Key" ng-checked="customerOption.Checked" />{{customerOption.Value}}
        </div>
    </div>
</div>

Partial View 2:

<div ng-controller="CustomerController" data-ng-init="init()" class="col-md-2">
<select ng-model="customerKey" ng-options="customer.Key as customer.Value for customer in customers"></select>

</div>

angular Controller:

var customer = angular.module('customer', []);

 customer.controller('CustomerController', [
"$scope", "customerService",
function ($scope, customerService) {
    $scope.customerOptions = CustomerOptions;

    $scope.getCustomers = function (customerType) {
        $scope.showContent = false;
        if (customerType == "1") {
            customerService.getProduction().then(function (result) { $scope.customers = result.data; });
        } else if (customerType == "2") {
            customerService.getTest().then(function (result) { $scope.customers = result.data; });
        } else {
            customerService.getAll().then(function (result) { $scope.customers = result.data; });
        }
    };

    $scope.init = function() {
        $scope.getCustomers("3");
    }
}
])

When I change the radio button on partial view 1, it fires the getCustomer() method but it does not change the list to the updated list..

What am I missing?

You have two instances of the controller - they won't update eachother, they don't know about eachother. — tymeJV, Jan 13 '15 at 20:41
@tymeJV how do I only initiate one controller that functions for both — Robert, Jan 13 '15 at 20:43
@Robert -- Have your controller be on the parent element of both partials, or use a service/factory to persist data. — tymeJV, Jan 13 '15 at 20:47

score 1 · Accepted Answer · answered Jan 14 '15 at 14:22

Your controllers are creating two separate instances of one another, and therefore they don't know about eachother. You can either:

Use a service / factory to persist data between controllers, or,

Put a parent controller on the container element of both partials so they both have access to the same controller.

Actions across partial views on a shared controller not firing

1 Answers1