Show Data on click a parent angular

please am very new new to angular and am trying to do something i don't know if its possible. I have a json data and i want to render the option on click of an item. What i want to achieve is to show models of a phone on click of the name, and on click of a phone model show all the phone parts. But whenever i click on a phone i get undefined in my console.

my app.js file

(function(){

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

app.controller('phoneController',function($scope){
this.phones = [
       {
           name: 'Apple',
          model: [{ name: 'Iphone 5'}, {name: 'Iphone 6'},{name: 'Iphone 6s'}],
          part:  [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
       },
       {
           name: 'Samsung',
           model: [{ name: 'S4'}, {name: 'S5'},{name: 'S6'}],
           part:  [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
       },
       {
           name: 'Nokia',
           model: [{ name: 'Lumia'}, {name: '3310'},{name: 'Asha'}],
           part:  [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
       },
       {
           name: 'Blackberry',
           model: [{ name: 'Passport'}, {name: 'Touch 10'},{name: 'Asha'}],
           part:  [{name:'ear phones'},{name:'external speakers'},{name:'Screen Guard'},{name:'Charger'}]
       }
     ];

      $scope.loadModels=function(phone)
  {
    var phone=phone.name;
    console.log (phone);
  }
    });

     })();

My Html View

  <div class="phones_wrapper row">

    <!--begin container-->
    <div class="container">

       <form class="" action="#" method="post" ng-controller="phoneController as phone" >
         <div class="row">
           <div class="col-md-3 phone_display center" ng-repeat="p in phone.phones">
          <label>
            <input type="radio" ng-click="loadModels(phone)"  ng-model="phone.name" name="phone" ng-value="{{p.name}}" />
            <img src="http://placehold.it/200x200">
          </label>
             <p class="text text-center phone_name">{{p.name}}</p>
           </div>

           </div>
       </form>




    </div>
    <!--begin container-->

</div>

Solution

Here is a simple example plnkr on how you can click on the list of the items you describe to view more details such as models and parts.

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="phone in phones" ng-click="showModels = true">{{phone.name}}
        <ul ng-show="showModels">
          <li ng-repeat="model in phone.model" ng-click="showParts = true">{{model.name}}
            <ul ng-show="showParts">
              <li ng-repeat="part in phone.part">
                {{part.name}}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>

Basically what you have to do is add repeaters and ng-click events to expand the content. I am pretty sure that from this example you will be able to fix it with your own styling and markup.

Edit:

A better example where you can toggle the viewing of models and parts.

  <body ng-controller="MainCtrl">
    <ul>
      <li ng-repeat="phone in phones" ng-click="showModels = !showModels; $event.stopPropagation()">{{phone.name}}
        <ul ng-show="showModels">
          <li ng-repeat="model in phone.model" ng-click="showParts = !showParts; $event.stopPropagation()">{{model.name}}
            <ul ng-show="showParts">
              <li ng-repeat="part in phone.part">
                {{part.name}}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>