CODEWITHSUNDEEP
angularjsangularjs-scope
jmckie
jmckie

Reputation: 259

Select Dropdown not displaying $scope value in model

I've used angular plenty of times, but can't seem to spot the issue I'm getting:

I pass through an ID like so as a clickable link within a repeater:

<td data-title="'Company Name'" sortable="'CompanyName'"><a ui-sref="Locations({company_id: row.CompanyID})">{{row.CompanyName}}</a> </td>

The value is correctly passed through and received by the relevant controller I use a query string service to get the relevant filters. The console.log correctly shows the correct value. However, it is not selecting the relevant value within the select dropdown:

angular.module('app').controller("LocationsController", ['$timeout',  
'$scope', '$http', 'QueryStringService', 'NgTableParams', '$location', 
function ($timeout, $scope, $http, QueryStringService, NgTableParams, 
$location) {
var default_filters = { location_name: "", address_1: "", company_id: "" };
$scope.filterBy = QueryStringService.getFilters(jQuery.extend(true, {}, default_filters));

console.log($scope.filterBy.company_id);
}


// Displayed on relevant view
<select ng-model="filterBy.company_id" ng-options="option.CompanyID as option.CompanyName for option in companies" class="form-control form-control-query">
    <option value="">All</option>
</select>

Can anyone notice anything?

Upvotes: 0

Views: 82

Answers (1)

Mistalis
Mistalis

Reputation: 18279

I think you are facing a controller scope issue: You are setting a variable in a controller instance, and trying to get it from another instance.

The fact is that a controller is instancied for each page, even if it is the same controller name (that may be confusing).

You should use a service to store this variable (for example your QueryStringService), and access it from your other page.

Here is a JSFiddle demo.

Upvotes: 1

Related Questions