Angular : select / ng-option not fired: how to debug?

Question

I have a trouble with a piece of angular code: I have a "ng-select" which works in some environments but not in others !

The model of this code is:

 var imputationApp = angular.module('imputationApp', []).controller('imputationController', function($scope) {
    $scope.currentSL = '';
    $scope.sousLignes = [ 
        { "slidx":"c5!1875354624","desc":"option1 " }, 
        {"slidx":"c9!1875379297","desc":"option 2" }, 
        { "slidx":"c9!1875379392","desc":"option 3" } 
    ];
});

and the HTML:

<div ng-app="imputationApp" ng-controller="imputationController">
 <fieldset> <legend>Imputation :</legend>  
     <select class="liste-candidats-select" ng-model="currentSL" ng-options="item as item.desc for item in  sousLignes"  ></select>
   <br />
<span> aE: {{currentSL.desc}} / {{currentSL.slidx}}  </span> 
</fieldset> 
</div>

It could be tested on fiddle: http://jsfiddle.net/zDvD9/78/

Alone, there is no problem.

But when integrated in more complex pages, sometimes it run, sometime not... So it's impossible for me to give more detail about it.

Could someone give me some idea how to try to debug it ? I never do it with angular, and I don't know if there is a way to catch the events on select's changes...

Thank you for any possible solution. Didier

Answer 1

I'm not 100% sure, but I think my concern is not related directly to Angular, but it is rather a problem of integration of an Angular "code" in another application that uses jQuery, ...

The "ng-select" component is the only "Angular" problem I have in this page.

After 3 days of headache, I found (hope !) a workaround, which need some work :

In my controller, I added a global var:

var AngularMainScope = null;
var imputationApp = angular.module('imputationApp', []).controller('imputationController', function($scope) {
        ...
        AngularMainScope = $scope;

$scope.onSelectChangeSousLigne = function(sel){

    alert(' onSelectChangeSousLigne fired !!! ' + sel.value);  

    var wsl = $scope.data.idx_sousLignes[sel.value];
    $scope.data.currentSL = wsl;
    // do some stuffs..
    ...
    // Tell to Angular...
    if (!$scope.$$phase) {
        $scope.$apply();  // MAGIC !
    }
    return;
}

And in the HTML code...

<select ng-model="data.cur_slidx" onchange="AngularMainScope.onSelectChangeSousLigne(this)"   >
    <option  ng-repeat="item in data.sousLignes" value="{{item.slidx}}">{{item.desc}}</option>
</select>

I still have to check if I can properly retrieve the current value. I'm already happy to have an event for each change of the value!