Two separate controllers are being used here; one for language, known as `langCntl`, and one for words, referred to as `wordCntl`.
Within the `wordCntl` controller, there is an attribute called `ln`. This attribute is displayed in a form using `ng-select`, with `ngOptions` populated based on records in the `langCntl` controller.
The question at hand is how to update the `select` field for `ln` in the `wordCntl` when the records in `langCntl` change.
langMod.js
var langMod = angular.module('langMod', ['ngResource']);
langMod.controller('langCntl',function($scope,$http) {
$scope.langs = [];
$scope.reset = function() {
$http.get( '/lang.jsn').success( function(data) {
console.log( 'http.success: data='+data );
$scope.langs = angular.copy($scope.origs);
});
};
$scope.reset();
});
langMod.controller('wordCntl',function($scope) {
var langElem = document.querySelector("[ng-controller='langCntl']");
$scope.langs = angular.element(langElem)).scope().langs;
$scope.rcd = { ln: 'en', word: '?' };
});
index.html
<html lang='en' ng-app='langMod'>
<body>
<ng-form ngForm='abc' ng-controller='wordCntl'>
<select ng-model="rcd.ln" ng-options="c.lang as c.name for c in langs">
</ng-form>
</body>
</html>
Some intriguing observations:
- Despite changes in `langCntl.langs`, `wordCntl.langs` remains empty.
- In the `ngoptions`, is it possible to directly use the records from `langCntl`?