title: Having trouble rendering templates in Angular.js
body: <p>i am getting this error on my JS error console:</p>
  
  <pre><code>DOMException
  code: 8
  message: "NOT_FOUND_ERR: DOM Exception 8"
  name: "NOT_FOUND_ERR"
  __proto__: DOMException
  </code></pre>
  
  <p>i am unable to render the json data on my template defined.</p>
  
  <p>below is my code:</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="picsography"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Picsography&lt;/title&gt;
    &lt;link rel="stylesheet" href="css/app.css"/&gt;
    &lt;link rel="stylesheet/less" href="lib/bootstrap/less/bootstrap.less"&gt;
    &lt;link rel="stylesheet/less" href="css/500.less"&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;header class="navbar navbar-fixed-top" id="header"&gt;
              &lt;div class="navbar-inner"&gt;
                  &lt;nav class="container"&gt;
                      &lt;div class="brand"&gt;Picsography&lt;/div&gt;
                      &lt;div class="input-append pull-left"&gt;
                  &lt;div class="input-append"&gt;&lt;input type="text" id="search-field" data-provide="typeahead" placeholder="Search"&gt;&lt;button class="btn btn-primary" style="margin-left: 0;" type="button"&gt;Search&lt;/button&gt;&lt;/div&gt;
                &lt;/div&gt;
                      &lt;div class="btn-group pull-right" id="user-menu"&gt;
                          &lt;a class="btn" href="#/posts"&gt;&lt;i class="icon-plus"&gt;&lt;/i&gt;&lt;span&gt; Share&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="btn" href="#/view2"&gt;&lt;i class="icon-inbox"&gt;&lt;/i&gt;&lt;span&gt; Inbox&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="btn" href="#posts"&gt;&lt;i class="icon-home"&gt;&lt;/i&gt;&lt;span&gt; Dashboard&lt;/span&gt;&lt;/a&gt;
                          &lt;a class="btn" href="#view2"&gt;&lt;i class="icon-shopping-cart"&gt;&lt;/i&gt;&lt;span&gt; Marketplace&lt;/span&gt;&lt;/a&gt;
                          &lt;button class="btn dropdown-toggle" data-toggle="dropdown"&gt;&lt;i class="icon-user"&gt;&lt;/i&gt;&lt;span&gt;&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Account Settings&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Privacy Settings&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="btn-group pull-right"&gt;
                          &lt;a class="btn btn-mini" href="#"&gt; 0 &lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;section class="container-fluid"&gt;
              &lt;div class="row-fluid"&gt;
                  &lt;aside id="side-nav" class="well span2"&gt;
                      &lt;ul class="nav nav-list"&gt;
                        &lt;li class="nav-header"&gt;&lt;i class="icon-star"&gt;&lt;/i&gt;TRENDING NOW&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-arrow-up"&gt;&lt;/i&gt;Animal Humor&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-arrow-down"&gt;&lt;/i&gt;Movie Jokes&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-arrow-up"&gt;&lt;/i&gt;Memes&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-arrow-down"&gt;&lt;/i&gt;Celebrity Jokes&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-arrow-up"&gt;&lt;/i&gt;Political Humor&lt;/a&gt;&lt;/li&gt;
                        &lt;li class="nav-header"&gt;&lt;i class="icon-tags"&gt;&lt;/i&gt;RECOMMENDED FOR YOU&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-tag"&gt;&lt;/i&gt;Political Humor&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-tag"&gt;&lt;/i&gt;Celebrity Jokes&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-tag"&gt;&lt;/i&gt;Hollywood Humor&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-tag"&gt;&lt;/i&gt;Animal Humor&lt;/a&gt;&lt;/li&gt;
                        &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-tag"&gt;&lt;/i&gt;Adult Humor&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/aside&gt;
                  &lt;div ng-view class="row span10"&gt;&lt;/div&gt;  
              &lt;/div&gt;
          &lt;/section&gt;
  
      &lt;script src="js/less-1.3.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/jquery/jquery-1.3.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular-resource.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      &lt;script src="js/services.js"&gt;&lt;/script&gt;
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="js/filters.js"&gt;&lt;/script&gt;
      &lt;script src="js/directives.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-alert.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-button.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-carousel.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-collapse.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-dropdown.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-modal.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-popover.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-scrollspy.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-tab.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-tooltip.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-transition.js"&gt;&lt;/script&gt;
      &lt;script src="lib/bootstrap/js/bootstrap-typeahead.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>partials/post-list.html</p>
  
  <pre><code>&lt;div class="subnav span12" id="subnav"&gt;
    &lt;div class="btn-group pull-left" id="sort-nav"&gt;
      &lt;a class="btn active"&gt;Popular&lt;/a&gt;
      &lt;a class="btn"&gt;Recent&lt;/a&gt;
      &lt;a class="btn"&gt;Favorite&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="btn-group pull-right " id="view-nav"&gt;
        &lt;a class="btn active" id="2col"&gt;&lt;i class="icon-th-large"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="btn" id="3col"&gt;&lt;i class="icon-th"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="btn" id="6col"&gt;&lt;i class="icon-th-list"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="btn-group pull-right"&gt;
      &lt;a id="reload" class="btn"&gt;&lt;i class="icon-refresh"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="btn"&gt;&lt;i class="icon-random"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div class="row span12" id="img-container"&gt;
      &lt;ul class="unstyled row"&gt;
        &lt;li class="span3" ng-repeat="post in posts"&gt;
          &lt;img src="img/1.jpg"&gt;
          &lt;p&gt;{{post.description}}&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="span3"&gt;
          &lt;img src="img/1.jpg"&gt;
          &lt;p&gt;Image Description&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="span3"&gt;
          &lt;img src="img/1.jpg"&gt;
          &lt;p&gt;Image Description&lt;/p&gt;
        &lt;/li&gt;
        &lt;li class="span3"&gt;
          &lt;img src="img/1.jpg"&gt;
          &lt;p&gt;Image Description&lt;/p&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>services.js</p>
  
  <pre><code>angular.module('picsographyServices', ['ngResource']).
      factory('Post', function($resource){
    return $resource('json/posts.json', {}, {
      query: {method:'GET', isArray:true}
    });
  });
  </code></pre>
  
  <p>controllers.js</p>
  
  <pre><code>function PostListCtrl($scope, Post) {
    $scope.posts = Post.query();
  }
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>angular.module('picsography', ['picsographyServices']).
    config(['$routeProvider', function($routeProvider) {
      $routeProvider.when('/posts', {templateUrl: 'partials/post-list.html', controller: PostListCtrl});
      $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
      $routeProvider.otherwise({redirectTo: '/posts'});
    }]);
  </code></pre>
  
  <p>posts.json</p>
  
  <pre><code>[{
      "url": "details",
      "title": "Test Title",
      "description": "Sample Description",
      "image": "assets/images/1.jpg",
      "tags": ["photo", "internet"],
      "user": "hilarl",
      "comments": ["sample comment"],
      "likes": 23,
      "dislikes": 100,
      "resolution": { "x": 150, "y": 58 }
  },
  {
      "url": "details",
      "title": "Test Title",
      "description": "Sample Description",
      "image": "assets/img/2.jpg",
      "tags": ["photo", "internet"],
      "user": "hilarl",
      "comments": ["sample comment"],
      "likes": 23,
      "dislikes": 100,
      "resolution": { "x": 150, "y": 58 }
  },
  {
      "url": "details",
      "title": "Test Title",
      "description": "Sample Description",
      "image": "assets/img/3.jpg",
      "tags": ["photo", "internet"],
      "user": "hilarl",
      "comments": ["sample comment"],
      "likes": 23,
      "dislikes": 100,
      "resolution": { "x": 150, "y": 58 }
  }]
  </code></pre>