Passing parameters with dropdown on AngularJS

Question

I'm trying list data according with data choose on a drop down menu.

My service list data with a hardcode (id 6).

    var url = 'http://localhost:3854/listarServicosByEstab/' + '6'; // Hardcode!

How do I pass the select item ID to the service?

Dropdown HTML (ng-click doesnt work):

         <!-- Combobox -->            
        <div class="row">
            <div class="dropdown" ng-controller="EstabelecimentosPageCtrl">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdown_estabelecimentos" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Estabelecimentos
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdown_estabelecimentos" >
                    <li>
                        <a ng-repeat="estab in listaDeEstabelecimentos" href="#" ng-click="$parent.current = item">
                            {{estab.nomeEstab}}
                        </a>
                    </li>
                </ul>
                Choose Test: {{item}}
            </div>
        </div>

Menu Controller:

.controller('ListServicoCtrl', function($scope, $state, ListServicoService) {
ListServicoService.listarServicos().then(function(dados){
    $scope.listaDeServicos = dados;
});  });

Service:

.service('ListServicoService', function($http){

var url = 'http://localhost:3854/listarServicosByEstab/' + '6'; // Hardcode!

return{
  listarServicos : function (){
      return $http.get(url).then(function(response){
          return response.data;
        });
  }
}});

Answer 1

 <div class="row">
            <div class="dropdown" ng-controller="EstabelecimentosPageCtrl">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdown_estabelecimentos" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Estabelecimentos
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdown_estabelecimentos" >
                    <li>
                        <a ng-repeat="estab in listaDeEstabelecimentos"   ng-click="passdata(estab.Id)">
                            {{estab.nomeEstab}}
                        </a>
                    </li>
                </ul>
                Choose Test: {{item}}
            </div>
        </div>

Your Controller

.controller('ListServicoCtrl', function($scope, $state, ListServicoService) {

$scope.passdata = function(id){
ListServicoService.listarServicos(id).then(function(dados){
    $scope.listaDeServicos = dados;
});
} });

Your Service

.service('ListServicoService', function($http){



return{
  listarServicos : function (id){
      return $http.get('http://localhost:3854/listarServicosByEstab/' + id).then(function(response){
          return response.data;
        });
  }
}});

Remove href from anchor tag and make a function like I have shown in controller. By assuming that your json contains value like Id I have demonstrated it. Hope this code will work for you.