<!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 */