How to make href in button inside collapse

Question

I have a collapsed model which show more information about client, and insid it, I have a button, when I click, I don't get the informations of the specific client, I get data of all clients

<ion-list ng-repeat="x in names">
    <a class="item  item-icon-left " >
                <i class="icon ion-android-arrow-dropdown-circle" ng-model="collapsed" ng-click="collapsed=!collapsed"></i>
                {{x.Marque}}   
              </a>
              <div ng-show="collapsed">
                    <table>
                          <thead >
                             <td>   
                                 <label> Code:  </label> {{x.CodeClient}}    <br/> 
                                 <label> Nom:   </label> {{x.NomClient}}     <br/> 
                                <a class="button button-info" ui-sref="modifClient({CodeClient: x})" >
                                Enregistrer
                                </a> 
        ...

app.js

     $stateProvider.state('modifClient', {
                    url: '/modifClient',
                    templateUrl: 'templates/modifClient.html',
                    params: {CodeClient: null},
                    controller: 'ConsultClientCtrl' 
                });
app.controller("ConsultClientCtrl", function($scope, $http) {
$scope.loadClient = function(){ 
           $http.get("http://localhost/deb/debut.php")  
           .success(function(data){  
                $scope.names = data; 
           });  
   }

});

modifClient.html

<ion-content class="padding" ng-controller="ConsultClientCtrl" ng-repeat="x in names | filter: {CodeClient: thisX}" >

  <ion-list ng-repeat="x in names | filter: {CodeClient: thisX}: true">

      <div class="item item-divider center-text" ng-model="CodeClient"> {{x.CodeClient}} </div>
......

Answer 1

You have to use the framework's href: ngHref or ng-click

<a class="button button-info" ng-href="/modifClient"> ...

LE: I've created a pen for this case. The problem is that you have an <a> in <a> and when you click it then it get's confused.

So I've changed the <a ng-show="collapsed"> to <div ng-show="collapsed"> and now works as expected (see pen too).

Answer 2

If you are using Angular ui-router and modifClient is a state in your router, you better use the Angular ui-sref attribute instead of HTML href.

Your code would be :

<a class="button button-info" ui-sref="modifClient">

---

Edit:

If you want to pass an object param in the ui-sref you can do it like this:

<a class="button button-info" ui-sref="modifClient({CodeClient: x.CodeClient})">

And change your state settings to include a params object:

$stateProvider.state('modifClient', {
     url: '/modifClient',
     templateUrl: 'templates/modifClient.html',
     params: {CodeClient: null},
     controller: 'ConsultClientCtrl' 
});

Note:

Note that you should also update your ConsultClientCtrl controller with a $scope.CodeClient variable so it can be updated from the ui-sref.

You can read How to pass parameters using ui-sref in ui-router to controller for further options.

---

Edit 2:

After reading your last Edit, I can see that you don't have a CodeClient variable in your controller, so update it like this:

app.controller("ConsultClientCtrl", function($scope, $http) {
    $scope.CodeClient = null;
    $scope.loadClient = function(){ 
       $http.get("http://localhost/deb/debut.php")  
       .success(function(data){  
            $scope.names = data; 
       });  
   }
});

And in your HTML just use:

<div class="item item-divider center-text"> {{CodeClient}} </div>

Without <ion-list ng-repeat ...> and the filter part as we already got the CodeClient variable in the Controller.