Pets Speak

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

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
  <script src="script.js"></script>

  <!-- SCROLLS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

  <!-- Custom styles for this template -->
  <link href="http://getbootstrap.com/examples/sticky-footer/sticky-footer.css" rel="stylesheet">
</head>


<body ng-controller="myCtrl">



  <header class="plain-header">
    <div class="container">
      <nav>
        <ul class="nav navbar-nav navbar-left" id="home_link">
          <li><a href="http://bryanttunbutr.com/">Bryant Tunbutr</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="https://bryanttunbutr.wordpress.com/">Blog</a></li>
          <li><a href="http://www.bryanttunbutr.com/projects">Projects</a></li>
          <li><a href="mailto:BTunbutr@gmail.com">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>


  <div class="container">

    <h1>Pets Speak</h1>
    <h3>By Using AngularJS Directives</h3>
    <p>Click on the image to go to the original image, and click the button to be greeted by each pet.</p>

      <div ng-repeat="m in mutants">
          <div actor-tile actor="m"></div>
      </div>




  </div>


  <!-- Footer -->

  <footer class="footer">
    <div class="container">

      <span style="float:left;">©2015 Bryant Tunbutr</span>

      <span style="float:right;">
            <a href="http://www.bryanttunbutr.com/projects" id="home">Projects</a>
            <a href="https://bryanttunbutr.wordpress.com/" id="blog" style="padding-left:20px">Blog</a></span>
    </div>
    <!-- end Container-->
  </footer>

</body>



</html>

// Code goes here

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

angular.module('myApp').directive('actorTile', function() {
  return {
    restrict: 'A',
    scope: {
      actor: '='
    },
    replace: true,
    templateUrl: 'actor-tile-template.html',
    link: function(scope, elem, attrs) {
      scope.hi = function() {
        alert(scope.actor.says + '!');
        // alert(scope.actor.says + '!');
      };
      elem.find('img').on('click', function() {
        window.open(scope.actor.image);
      });
    }
  };
});

angular.module('myApp').controller('myCtrl', function($scope) {
  $scope.mutants = [{
    name: 'Dog',
    breed: 'Shiba Inu',
    says: 'Woof',
    image: 'https://upload.wikimedia.org/wikipedia/commons/6/69/Shiba_Inu_cream_portrait.jpg'
  }, {
    name: 'Cat',
    actor: 'Siamese',
    says: 'Meow',
    image: 'https://upload.wikimedia.org/wikipedia/commons/c/ca/Niobe050905-Siamese_Cat.jpeg'
  }, {
    name: 'Snake',
    actor: 'Brown tree snake',
    says: 'Ssssss',
    image: 'https://upload.wikimedia.org/wikipedia/commons/c/c9/Brown_tree_snake_Boiga_irregularis_2_USGS_Photograph.jpg'
  }];
});

function sample ($scope) {
    
    $scope.procedures = [
        {
            definition: 'Procedure 1',
            discharged: 23
        },
        {
            definition: 'Procedure 2',
            discharged: 2
        },
        {
            definition: 'Procedure 3',
            discharged: 356
        }
    ];
}

/* Styles go here

h3, p {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
}

.actor-tile {
  border: 1px solid lightgray;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0 0 4px lightgray;
  margin: 10px;
  max-width: 150px;
  float: left;
}

.actor-tile img {
  margin-top: 5px;
  width: 100%;
}

.actor-tile button {
  width: 100%;
}

 */


 .categories {
   /* margin: 0 0 10px; */
   margin-left: auto;
   margin-right: auto;
 }
 
 .categories ul {
   /*   margin-left: auto;
margin-right: auto; */
   margin: 0 auto 0 auto;
   padding: 0;
   width: 100px;
   background: #f0f0f0;
   border: solid 1px #333;
   text-align: center;
list-style-type: none;
 }
 
 img {
   max-width: 250px;
 }
 
 .footer {
   height: 40px;
   background-color: transparent !important;
 }
 
 .plain-header {
   a {
     color: #428bca;
   }
   a:hover,
   a:focus {
     background-color: #FFF;
     color: #0085a1;
   }
   position: relative;
   padding: 30px 15px;
   text-align: center;
   font-size: 20px;
 }
 
 #home_link {
   font-size: 1.7em;
   color: white;
   text-transform: uppercase;
   letter-spacing: -1px;
   padding: 9px 15px;
   font-weight: bold;
 }
 
 #logo {
   color: #428bca;
   position: relative;
   text-align: center;
   font-size: 20px;
   padding: 30px 15px;
   text-align: left;
   :hover, :focus {
     background-color: #eeeeee;
     color: #0085a1;
   }
 }
 
 #logo:hover,
 #logo:focus {
   background-color: #eeeeee;
   color: #0085a1;
 }
 
 .footer {
   height: 40px;
   background-color: transparent;
 }
 
 h1,
 h3 {
   text-align: center;
 }
 
 .centering {
   text-align: center;
 }
 
 .center-block {
   float: none !important
 }

<div class="container centering">
  <div class="actor-tile">
    <h3>{{ actor.name }}</h3>
    <p>{{ actor.breed }}</p>
    <img ng-src="{{ actor.image }}">
    <br>

    <button type="button" class="btn btn-info" href="#" ng-click="showDetails = ! showDetails">What do I say?</button>
    <div class="procedure-details" ng-show="showDetails">
      <p>I say: {{actor.says}}!</p>
    </div>


  </div>
</div>