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

  <head>
    <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script data-require="underscore.js@1.6.0" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="TestController">
    <h1>Hello Plunker!</h1>
    <div>{{aString | capitalizeString}}</div>
    <div>{{number | addUniqueIdToNumber}}</div>
  </body>

</html>
// Code goes here

angular.module("TestApp", [])
  .controller("TestController", ["$scope", function($scope){
    $scope.aString = "elephant";
    $scope.number = 5;
    
  }])
  //GOOD FILTER
  .filter("capitalizeString", function(){
    return function(aString){
      return aString.toUpperCase();
    }
  })
  //BAD FILTER
  .filter("addUniqueIdToNumber", function(){
    return function(number){
      number += Math.random();
      return number;
    }
  })
  //MEMOIZED BAD FILTER -- NOW IT IS GOOD (THOUGH STILL STUPID)
  .filter("addUniqueIdToNumberMemoized", function(){
    return _.memoize(function(number){
      number += Math.random();
      return number;
    })
  })
  
  
/* Styles go here */