Display details of selected options in Angularjs

Question

I am new to learn AngularJs. How to display adSet details of selected options?

Here is my app.js file :

app.controller("AddCompaignCtrl", function($scope){ 
    $scope.status = ['active', 'inactive', 'closed'];
    $scope.objectives = ['obj1', 'obj2', 'obj3', 'obj4'];
    $scope.selectedCompaign = "Default-Campaign name";
    $scope.selectedCompaign_id =0 
    $scope.compaigns = [
        {
            id: 0,
            name: 'testCompaign 0',
            detail: {
                 status : 'active',
                 objective: 'obj1' 
            },
            adsets:[{
                name :"adset 01",
                status:"active", 
                budget:"5000",
                date :"2013-12-12" 
                },
                {
                name :"adset 02",
                status:"active", 
                budget:"5000",
                date :"2013-12-12" 
                } 
            ]   
        },
        {
            id: 1,
            name: 'testCompaign 1',
            detail: {
                 status :   'inactive' ,
                 objective: 'obj2' 
            },
            adsets:[{
                name :"adset 11",
                status:"active", 
                budget:"5000",
                date :"2013-12-12" 
                } 
            ]
        }];

Here is my HTML file :

<div ng-repeat='compaing in compaigns'>
     <div> {{compaing.name}} 
         <label>
             <input type="radio" name="campaign" value='{{compaing.id}}' ng-model='$parent.selectedCompaign'> 
         </label>
      </div>
</div>


<div class="row">
         <div class="col-md-3 column" ng-model ='selectedCompaign'>Campaign Name</div>
         <div class="col-md-9 column"> {{selectedCompaign }}  </div>
 </div><br>

I am able to display selected compaign id but how to display selected compaign adset details in below HTML table?

<table  class="table table-striped table-bordered table-condensed">
            <thead>
                  <tr>
                     <th>Name</th>
                     <th>Status</th>
                     <th>Budget</th> 
                     <th>Time</th>
                  </tr>
             </thead>
             <tbody>
                <tr> 
                     <td>adset1</td>
                     <td>Some</td>
                     <td>$502</td>
                     <td> 2012-12-12</td> 
                 </tr>
                 <tr>
                     <td>Addset 2</td>
                     <td>Joe</td>
                     <td>$6034</td>
                     <td> 2012-12-12</td> 
                 </tr>
             </tbody>
     </table>

I have tried out this one but nothing displaying :

 <table  class="table table-striped table-bordered table-condensed">
                <thead>
                      <tr>
                         <th>Name</th>
                         <th>Status</th>
                         <th>Budget</th> 
                         <th>Time</th>
                      </tr>
                 </thead>
                 <tbody>
                    <tr  ng-repeat='adset in compaigns[selectedCompaign].adsets'> 
                         <td>{{adset.name}}</td>
                         <td>Some</td>
                         <td>$502</td>
                         <td> 2012-12-12</td> 
                     </tr>

                 </tbody>
         </table>

Answer 1

You should use the ng-value attribute of the input. That would allow you to store the complete selected compaign object into the scope. For example:

$scope.campaigns = [...];
$scope.selection = {
    campaign: null
};

<div ng-repeat='campaign in campaigns'>
     <div> {{campaign.name}} 
         <label>
             <input type="radio" name="campaign" ng-value="campaign" ng-model="selection.campaign" /> 
         </label>
      </div>
</div>

Selected campaign: {{ selection.campaign }}

The documentation has an example showing the usage of ng-value.