trying a simple directive example

by chrisfrisina

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="jokes">
   <div class="container" ng-controller="MainController">
       The first question should have <span class="btn text">4 green buttons</span> (.btn-primary = text ) and <span class="btn img">one blue button</span> (.btn-succes = img)
       <hr/>
       <div class="row">
          <div class="col-md-4" ng-repeat="individualJoke in allJokes">
            <!-- {{joke}} -->
            <div class="row">
              {{individualJoke.joke}}
            </div>
            <div class="row">
              <answer ng-click="showAnswer = ! showAnswer" ng-repeat="answer in individualJoke.answers" type="answer.type" answer="answer.ans"></answer>
            </div>
          </div>
       </div>
    </div>
</div>

CSS

.text {
    background-color: lightblue;
}
.img {
    background-color: lightgreen;
}

JavaScript

angular.module('jokes', []);

angular.module('jokes').directive('answer', function() {
  return {
    restrict: 'E',
    scope: {
      type: '=type',
      answer: '=answer'
    },
      template: '<div class="col-md-9 btn {{type}}"><div ng-show="showAnswer">{{answer}}</div></div>',
      link: function(scope, iElm, iAttrs) {
      }
  };
});

angular.module('jokes').controller('MainController', [ '$scope', function MainController($scope) {
    $scope.message = 'Test Message: ';

    var data = {
      "jokes":[
        {
          "id:":1,
          "joke":"What do you call an Alligator in a vest?",
          "type":"CaR",
          "answers":[
            {
              "id":1,
              "type": "text",
              "ans":"An Investigator!",
              "pC":1
            },
            {
              "id":2,
              "type": "text",
              "ans":"A Snappy Dresser",
              "pC":1
            },
            {
              "id":3,
              "type": "text",
              "ans":"Overdressed",
              "pC":1
            },
            {
              "id":4,
              "type": "text",
              "ans":"Fancy as Fuck!",
              "pC":10
            },
            {
              "id":5,
              "type": "img",
              "ans": "img/investigator.png",
              "pC":1
            }
          ],
          "cadence":false,
          "parental":1
        },
        {
          "id:":2,
          "joke":"What is a pirate's favorite letter?",
          "type":"CaR",
          "answers":[
            {
              "id":1,
              "type": "text",
              "ans":"Rrrrrrr!",
              "pC":1
            },
            {
              "id":2,
              "type": "text",
              "ans":"Oh you think it's the Rrrrrr, but their first love be the Ceeeeeea!",
              "pC":1
            },
            {
              "id":3,
              "type": "text",
              "ans":"Their first love...