Demo of an AngularJS directive's templateUrl in JsBin

I have working code that I want to demo with JsBin but I can't get the AngularJS directive templateUrl to work (it does work with the template value). http://jsbin.com/guvok/ is trying to reference http://jsbin.com/razit/ but fails.

For the sake of completeness and posterity here's the code:

hello.html

<!DOCTYPE html>
<html ng-app="hello">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
</head>
<body>
  <div hello></div>
</body>
</html>

hello.css

.hello__content {
    background: #fff;
  }

hello.js

var meter = angular.module('hello', [])
  .directive( 'hello', function() {
    return {
      restrict: 'A',
      replace: true,
      //template: '<p class="hello__content">hello</p>',
      templateUrl: 'http://jsbin.com/razit/',
    };
  });

template.html

<p>hello, world</p>

Solution

Put this at the top of your HTML (after the script tag that loads Angular):

<script type="text/ng-template" id="templateURL">
  <!-- TEMPLATE MARKUP GOES HERE -->
</script>

Edit: In your case, the ID would be "http://jsbin.com/razit/", that way you wont have to edit your directive. Worst case, change the templateURL to not reference an external jsBin.

Edit #2: Changing the templateUrl to a string value not referencing an external url or with the http protocol, I now see your output in jsBin edit mode.

jsBin here: http://jsbin.com/dutofete/1/