<!DOCTYPE html>
<html ng-app='test'>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.3.0-beta.13" data-semver="1.3.0-beta.13" src="https://code.angularjs.org/1.3.0-beta.13/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller='appController' class='container'>
    <h1>Hello test!</h1>
    <ul class="list-group col-xs-12">
       <li class="list-group-item" ng-repeat='item in articles'>
           <h4 class="list-group-item-heading"><small>{{item.date}} -</small> {{item.title}}</h4>
    <p class="list-group-item-text">{{item.excerpt}}</p>
       </li>
    </ul>
  </body>

</html>
(function() {
   var app = angular.module('test', []);

   app.controller('appController', [
      '$scope','$http',
      function($scope, $http) {
         $scope.articles = [];

         $http.jsonp('http://stlucianewsonline.com/?json=recentstories&alt=json-in-script&callback=JSON_CALLBACK')
            .success(function(data) {

               $scope.articles = data.posts;
            })
            .error(function(data) {
               console.log("Data Pull failed!");
            });

         $scope.clearSearch = function() {
            $scope.articles.search = '';
         };
      }
   ]);
}());
/* Styles go here */