calling json array in another array in angularjs

Question

I am new in angular and json so if any one can help me.

I have json array In which I have users and the names of sellers from users buy stuff.

Json:

[
  {
    "name":"Kakaro",
    "sallers":[
     {"sellername":"Naruto","payment":"250","date":"07\/07\/2014","receipt":"popup"},
     {"sellername":"Sasuka","payment":"502","date":"08\/07\/2014","receipt":"popup"}
    ]
  },
  {
    "name":"Collin Ferall",
    "sallers":[
      {"sellername":"Jonny deep","payment":"250","date":"07\/07\/2014","receipt":"popup"},
      {"sellername":"Brad Pitt","payment":"502","date":"08\/07\/2014","receipt":"popup"}
    ]
  }
]

What I am trying to do: When a we select user then data of user's seller come in table.

I have seen many solution but I have failed in all solution. now I am at the beginning where I started.

Problem: I don't know how to properly call array in another array angular.

html:

<div id="main" class="row" ng-controller='payment'>
  <div>
    <label>Client Name:</label><br/>
    <select class="form-control input-sm" name="client_name">
      <option ng-repeat="names in name" value="{{names.name}}" ng-model="select">{{names.name}}</option>
    </select>
  </div>
  <div id="seller" class="margins_top">
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>Seller Name</td>
          <td>Payment</td>
          <td>Date</td>
          <td>Payment Receipt</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="sellers in seller">
          <td>{{sellers.sellername}}</td>
          <td>{{sellers.payment}}</td>
          <td>{{sellers.date}}</td>
          <td>{{sellers.receipt}}</td>
        </tr>
      </tbody>
    </table>
  </div><!-- /#seller -->
</div>  

Controller js:

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


app.controller('payment',function($scope,$http){
  getrecord(); // Load all available tasks 
  function getrecord(){  
    $http.post("angular/ajax/payment.php").success(function(data){
      $scope.name = data;
      $scope.seller = data[0].sallers;
    });
  }
});

I have create fiddle but it was not use but still I am adding it.

Fiddle

Answer 1

try it like this

in your HTML

    <select class="form-control input-sm" name="client_name" ng-model="select">
  <option ng-repeat="names in name" value="{{names.name}}">  {{names.name}}</option>
</select>

and in your JS

$scope.$watch('select', function(newvalue) {
            angular.forEach($scope.name, function(value, key) {
                if(value.name == newvalue) {
                $scope.seller = value.sallers;
                }
            });
            });