Third demo - transclusion

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

app.controller('MainCtrl', function($scope) {
  
  var rightAnswer = "http://www.acedarspoon.com/wp-content/uploads/2012/12/IMG_67321.jpg";
  
  $scope.answers = [
      "http://childadolescentweightmanagement.files.wordpress.com/2012/07/juicy-chicken-burger-pic-19-hamburger-ideas4.jpg",
      "http://static.parade.condenast.com/wp-content/uploads/2013/07/hot-dog-ftr.jpg",
      rightAnswer,
      "http://onpasture.com/wp-content/uploads/2014/04/13-08-08_015226_cbeer.jpg",
      "http://www.nextnature.net/wp-content/uploads/2013/02/cheetos-engineered-to-be-addicting-530x353.jpg",
      "http://img.wikinut.com/img/185rwtkbn410xfa5/jpeg/0/Mars-Bar-Krispie-Cakes.jpeg",
    ]
    
    $scope.answer = function(){
      if($scope.demoForm.$valid){
        if($scope.selection == rightAnswer)
          $scope.correct = true;
        else
          $scope.wrong = true;
      }
    }
});

app.directive('itemSelector', function factory(){
  return {
    templateUrl: "itemSelectorTemplate.html",
    replace: true,
    transclude: true,
    restrict: "E",
    require: 'ngModel',
    scope: {
      list: "=",
      model: "=ngModel"
    },
    link: function linking(scope, element, attr, ctrl){
      scope.tries = 5;
      
      scope.select = function(item){
        ctrl.$setViewValue(item);
      }
      
      ctrl.$viewChangeListeners.push(function(){
        scope.tries --;
      })
    }
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.0-beta.9/angular.js" data-semver="1.3.0-beta.9"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl" class="container">
    <div class="page-header">
      <h3>Custom inputs <small>Angular forms</small></h3>
    </div>
    <form role="form" name="demoForm" ng-submit="answer()" ng-hide="correct || wrong">
    
      <div class="alert alert-info">
        <span class="glyphicon glyphicon-question-sign"></span>
        What is making me thirsty?
      </div>
    
      <div class="form-group" ng-class="{'has-error': !demoForm.mail.$valid}">
        <item-selector list="answers" ng-model="selection" name="ans" required>
          <div class="button">
            <img src="{{item}}" class="img-thumbnail">
            <a href="" ng-click="select(item)" class="btn btn-primary">
              Select
            </a>
          </div>
        </item-selector>
        <span class="help-block" ng-show="demoForm.ans.$error.required">Hint - It's salty</span>
      </div>
      
      <button type="submit" class="btn btn-primary" ng-disabled="!demoForm.$valid">Answer</button>
    </form>
    
    <div ng-show="correct">
      <h3>You are correct!</h3>
      <img src="{{selection}}" class="img-thumbnail">
      <h2>These pretzels are making me thirsty!</h2>
      <a href="?">Reset</a>
    </div>
    
    <div ng-show="wrong">
      <h3>You are incorrect!</h3>
      <img src="{{selection}}" class="img-thumbnail">
      <h2>These pretzels are making me thirsty!</h2>
      <a href="?">Reset</a>
    </div>
    
  </body>

</html>

.item-selector ul {
  max-height: 300px;
  overflow:auto;
}

.item-selector ul li{
  padding: 5px 10px;
}

.item-selector ul li .thumbnail{
  padding: 0 !important;
  margin: 0 !important;
}

.item-selector ul li .thumbnail.empty {
  font-size: 25px;
  text-align: center;
  line-height: 50px;
}

.selected {
  width: 121px;
}

.button {
  position: relative;
}
.button .btn {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.button img {
  width: 121px;
}

<div class="btn-group item-selector">
  <button type="button" class="btn btn-default dropdown-toggle" ng-disabled="tries==0" data-toggle="dropdown">
    <span ng-if="!model">
      I don't know... <span class="caret"></span>
    </span>
    <span ng-if="model">
      <img src="{{model}}" class="selected"> <span class="caret"></span>
    </span>
  </button>
  <p class="text-muted">You've got {{tries || 'no'}} more tries</p>
  <ul class="dropdown-menu" role="menu">
    <li>
      <a href="" ng-click="select(null)" class="thumbnail empty">
        <span class="glyphicon glyphicon-ban-circle"></span>
      </a>
    </li>
    <li ng-repeat="item in list" ng-transclude></li>
  </ul>
</div>