AngularJS updating the contents on select

Question

I tried to update the contents of my DIV based on a select option but could not figure it out how to update it. I have the code HERE.

The data are in two different JSON objects. For there is only one JSON, I could do that but with two individual JSON, how to update my contents?

MY HTML:

<div ng-controller="MyCtrl">
  <select ng-options="account as account.id for account in accountInfo " ng-model="accounts" ng-change="update(accounts)">
      <option value="">Select Account</option>
  </select>

 <!-- Before displaying the following, I need to apply a condition here as if(accountInfo).id == accounts.Id -->

    <div>        
        <div ng-repeat="d in accounts.description">{{d}}</div> <br />
        <div ng-repeat="ca in accounts.cashAvailable">{{ca}}</div> <br />
        <div ng-repeat="tv in accounts.totalValue">{{tv}}</div>
    </div>
</div>

MY JS

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



function MyCtrl($scope) {
$scope.accountInfo = [
{
    "id": "0",
    "accountName": "Account A"
},
{
    "id": "1",
    "accountName": "Account B"
},
{
    "id": "2",
    "accountName": "Account C"
}
];

  $scope.accounts = [
{
    "id": "0",
    "accountName": "Account 1",
    "principalAmount": "0.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 1",
            "Mellisa's IRA",
            "BR Demo 1",
            "BR Demo 2",
            "BR Demo 3"
    ],
    "cashAvailable": [
            "278,800.33A",
            "0.00",
            "574.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12A",
            "36,373.44",
            "574.78",
            "501,211.71",
            "2,228.92"
    ]
},

{
    "id": "1",
    "accountName": "Account 2",
    "principalAmount": "0.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 2",
            "Mellisa's IRA",
            "BR Demo 4",
            "BR Demo 5",
            "BR Demo 6"
    ],
    "cashAvailable": [
            "278,800.33B",
            "0.00",
            "575.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12B",
            "36,373.44",
            "575.78",
            "501,211.71",
            "2,228.92"
    ]
},

{
    "id": "2",
    "accountName": "Account 3",
    "principalAmount": "70.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 3",
            "Mellisa's IRA",
            "BR Demo 7",
            "BR Demo 8",
            "BR Demo 9"
    ],
    "cashAvailable": [
            "278,800.33C",
            "0.00",
            "576.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12C",
            "36,373.44",
            "576.78",
            "501,211.71",
            "2,228.92"
    ]
}

];
  $scope.update = function() {
//console.log($scope.item.code, $scope.item.name);
//alert("change");
  }
}

Answer 1

OK, I solved it HERE

The JS code is as follows:

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



function MyCtrl($scope) {
$scope.accountInfo = [
{
    "id": "0",
    "accountName": "Account A"
},
{
    "id": "1",
    "accountName": "Account B"
},
{
    "id": "2",
    "accountName": "Account C"
}
];


  $scope.update = function(accounts) {
//console.log($scope.item.code, $scope.item.name);
//alert("change");
  $scope.acctountDetails = [
{
    "id": "0",
    "accountName": "Account 1",
    "principalAmount": "0.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 1",
            "Mellisa's IRA",
            "BR Demo 1",
            "BR Demo 2",
            "BR Demo 3"
    ],
    "cashAvailable": [
            "278,800.33A",
            "0.00",
            "574.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12A",
            "36,373.44",
            "574.78",
            "501,211.71",
            "2,228.92"
    ]
},

{
    "id": "1",
    "accountName": "Account 2",
    "principalAmount": "0.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 2222",
            "Mellisa's IRA",
            "BR Demo 4",
            "BR Demo 5",
            "BR Demo 6"
    ],
    "cashAvailable": [
            "278,800.33B",
            "0.00",
            "575.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12B",
            "36,373.44",
            "575.78",
            "501,211.71",
            "2,228.92"
    ]
},

{
    "id": "2",
    "accountName": "Account 3",
    "principalAmount": "70.00",
    "commission": "0.00",
    "totalAmount": "0.00",
    "description": [
            "My IRA 3",
            "Mellisa's IRA",
            "BR Demo 7",
            "BR Demo 8",
            "BR Demo 9"
    ],
    "cashAvailable": [
            "278,800.33C",
            "0.00",
            "576.78",
            "501,211.71",
            "2,228.92"
    ],
    "totalValue": [
            "2,008,408.12C",
            "36,373.44",
            "576.78",
            "501,211.71",
            "2,228.92"
    ]
}

];
  $scope.test = ""; //$scope.acctountDetails.length;
  for(var i=0; i<$scope.acctountDetails.length; i++) {
      if(accounts.id == $scope.acctountDetails[i].id) {
          $scope.test = $scope.acctountDetails[i].description;
       }
      }
  }
 }

Answer 2

I updated your fiddle, your update routine is being passed in accounts in your markup, and you can handle it in your controller like this:

$scope.update = function(accounts) {
    // accounts is your selected item and you can what you need here
    alert(accounts.id);
}

updated fiddle

Answer 3

there is other resolve method: $scope.d=$scope.accounts[account.id].description; $scope.ca=$scope.accounts[account.id].cashAvailable; $scope.tv=$scope.accounts[account.id].totalValue;

select update