Angular JS - an ng-model directive template does not work within ng-switch

Question

To get more dynamic my directive decided to include the category field that makes the selection of the type of template to be displayed. As it is just a select thought to use ng-switch instead of multiple html files.

Plunker: http://plnkr.co/edit/fnCJj15XJN1kQvKq1OtZ?p=preview

index.html

<div ng-controller="MainCtrl">
<sg-combo 
  selected-item="selectedItem" categoria="filtro">
</sg-combo>

{{selectedItem}}

script js.

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

app.controller('MainCtrl', function($scope) {
  $scope.selectedItem = null;
    $scope.$watch('selectedItem',function(item){
    if (item != null){
        alert(item.nome); // Não exibe o alert qdo está com o switch
    }
  })
});

app.directive('sgCombo', function(){
    function link(scope, elem, attrs){    
            scope.dados = [
                {'codigo':1, 'nome':'teste1'},
                {'codigo':2, 'nome':'teste2'},
                {'codigo':3, 'nome':'teste3'}
            ];
    }

    return {
            restrict: 'E',          
        scope: {            
            selectedItem: '=',            
            categoria: '@'            
        },
        link: link,
        templateUrl:"sg-combo.html"
    }
})

Sg-combo.html

<div ng-switch="categoria">
  <div ng-switch-when="filtro" class="col-sm-4 control-label">
     <div class="col-sm-4 control-label">
        <label>{{label}}</label>
        <select ng-model="selectedItem" ng-options="item.nome for item in dados" class="form-control"></select>
     </div>
  </div>
  <div ng-switch-when="anexo" class="col-sm-4 control-label">
     <div class="col-sm-4 control-label">
        <label>{{label}}</label>
        <select ng-model="selectedItem" ng-options="item.nome for item in dados" class="form-control"></select>
     </div>
  </div>
</div>

Answer 1

I got into your Plunker and I noticed that it’s working yes.

I adjusted some points in your project and got the expected result:

Follow the Altered Plunker: Plunker

Basically the changes were:

Put an identifier (title) in templates, to know that the switch worked

 <div ng-switch-when="filtro" class="col-sm-4 control-label">Filtro
 <div ng-switch-when="anexo" class="col-sm-4 control-label">Anexo

I modified the index to bring different categories of template:

<sg-combo selected-item="selectedItem" categoria="filtro"></sg-combo>
{{selectedItem}}

<sg-combo selected-item="selectedItem2" categoria="anexo"></sg-combo>
{{selectedItem2}}

Modify your test of watchsince the item is an object (not null) and it was entering the if, null is the value of the object...

$scope.selectedItem = {value:null};
$scope.selectedItem2 = {value:null};
$scope.$watch('selectedItem',function(item){
    if (item.value !== null) { /* code */ }

$scope.$watch('selectedItem2',function(item){
    if (item.value !== null) { /* code */ }
}

Hug !