How can I show data based on my requirements in angularjs?

Question

In this example based on mobile brand selection mobile models coming with checkbox everything is working. Based on user brand selection mobile models are coming.

For htc brand I have models with image when user clicks htc models should show images instead of showing

Htc One X9

Desire 820

Desire 810S

it should show images with check box but while submit it should pass model name. Any one help is appreciated

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

myApp.controller('MyCtrl', function($scope, $http) {
  $scope.selectedBrands = [];

  $scope.selectBrand = function(selectedphone) {
    // If we deselect the brand
    if ($scope.selectedBrands.indexOf(selectedphone.brandname) === -1) {
      // Deselect all phones of that brand
      angular.forEach($scope.phones, function(phone) {
        if (phone.brandname === selectedphone.brandname) {
          phone.selected = false;
        }
      });
    }
  }

  $scope.checkSelectedphones = function() {
    var modelNames = [];
    var jsonArr = [];
    var subModelArr = [];
    var aletrMsg = '';
    angular.forEach($scope.phones, function(phone) {
      if (phone.selected) {
        modelNames.push(phone);
        var found = jsonArr.some(function(el) {
          if (el.model === phone.brandname) {
            el.subModel.push(phone.modelname);
            return true;
          }
        });

        if (!found) {
          subModelArr.push(phone.modelname);
          jsonArr.push({
            model: phone.brandname,
            brand: 'Nokia',
            subModel: subModelArr,
            city: 'Noida',

          });
          subModelArr = [];
        }

      }

      phone.selected = false;
    });
    console.log(modelNames.length);
    if (modelNames.length == 0) {
      alert(modelNames.length ? aletrMsg : 'No phones selected!');
    } else {
      console.log(jsonArr);
    }

    $scope.selectedBrands = [];
  }

  $scope.phones = [{
    id: "986745",
    brandname: "Nokia",
    modelname: "Lumia 735 TS"
  }, {
    id: "896785",
    brandname: "Nokia",
    modelname: "Nokia Asha 230"
  }, {
    id: "546785",
    brandname: "Nokia",
    modelname: "Lumia 510"
  }, {
    id: "144745",
    brandname: "Samsung",
    modelname: "Galaxy Trend 840"
  }, {
    id: "986980",
    brandname: "Samsung",
    modelname: "Galaxy A5"
  }, {
    id: "586980",
    brandname: "Samsung",
    modelname: "Galaxy Note 4 Duos"
  }, {
    id: "986980",
    brandname: "Samsung",
    modelname: "Galaxy A5"
  }, {
    id: "586980",
    brandname: "Samsung",
    modelname: "Galaxy Note Duos"
  }, {
    id: "232980",
    brandname: "Htc",
    modelname: "Htc One X9",
    image:"http://cdn.bgr.com/2015/03/bgr-htc-one-m9-1.jpg",
  }, {
    id: "456798",
    brandname: "Htc",
    modelname: "Desire M9",
    image:"https://vtcdn.com/sites/default/files/images/2014/6/10/img-1402379949-1.jpg",
  }, {
    id: "656798",
    brandname: "Htc",
    modelname: "Desire 810S",
    image:"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQINOLh4PEebd7H8F5MM9SGdC14oQAH91I4XqHJZL3LlUg1PKoV",
  }];

});

myApp.filter('unique', function() {
  return function(collection, keyname) {
    var output = [],
      keys = [];

    angular.forEach(collection, function(item) {
      var key = item[keyname];
      if (keys.indexOf(key) === -1) {
        keys.push(key);
        output.push(item);
      }
    });

    return output;
  };
});

<div ng-controller="MyCtrl">
  <button ng-click="checkSelectedphones()">
    Check selected phones
  </button>

  <div ng-repeat="phone in phones | unique:'brandname'">
    <label>
      <input type="checkbox" ng-true-value="'{{phone.brandname}}'" ng-false-value="''" ng-model="selectedBrands[$index]" ng-change="selectBrand(phone)"> {{phone.brandname}}
    </label>
  </div>

  <br>

  <div ng-repeat="brand in selectedBrands track by $index" ng-if="brand">
    {{brand}}
    <div ng-repeat="phone in phones" ng-if="phone.brandname === brand">
      <label>
        <input type="checkbox" ng-model="phone.selected"> {{phone.modelname}}

      </label>
    </div>
  </div>
</div>

demo

Answer 1

Adding an answer after my comment.The other two answers are perfectly valid. I have added to your code this line which populates the image url from phone.image

<img src="{{phone.image}}" alt="{{phone.modelname}}" height="100px" width="100px"/>

Additionally, an optional div that shows the name if ticked.

<div ng-show="phone.selected">
      {{phone.modelname}}
     </div>

Here's a working demo

Answer 2

You can use ng-show to display image and text by different condition.

Change

<input type="checkbox" ng-model="phone.selected"> {{phone.modelname}}

to

<input type="checkbox" ng-model="phone.selected"> 
<span ng-show="!phone.image">{{phone.modelname}}</span>
<img ng-src="{{phone.image}}" ng-show="!!phone.image" />

Example: https://jsfiddle.net/osw35c14/10/

Answer 3

I've made a Fiddle based on your code. Here's the link: https://jsfiddle.net/0Lggc5pn/

Only the HTC phones have an image. So what I've done is add this code:

<img ng-if="phone.image" src="{{phone.image}}" width="20" height="20">
<span ng-if="!phone.image">{{phone.modelname}}</span>

So if there is an image available, the image will be displayed. Otherwise it will display the model name.

I've also removed the method called selectBrand(), which didn't seem necessary.