JSFiddle - React, Tailwind, and code Playground

HTML

<head>
	  <title>Flapper News</title>
	  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

	  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
		<script src="js/app.js"></script>


	  <style> .glyphicon-thumbs-up { cursor:pointer } </style>
	</head>

	<body ng-app="flapperNews">
	  <div class="row">
	    <div class="col-md-6 col-md-offset-3">
				<ui-view></ui-view>
	    </div>
	  </div>

		<script type="text/ng-template" id="/home.html">
			<div class="page-header">
				<h1>Flapper News</h1>
			</div>

			<div ng-repeat="post in posts | orderBy:'-upvotes'">
				<span class="glyphicon glyphicon-thumbs-up"
					ng-click="incrementUpvotes(post)"></span>
				{{post.upvotes}}
				<span style="font-size:20px; margin-left:10px;">
					<a ng-show="post.link" href="{{post.link}}">
						{{post.title}}
					</a>
					<span ng-hide="post.link">
						{{post.title}}
					</span>
				</span>
				<span>
				  <a href="#/posts/{{$index}}">Comments</a>
				</span>
			</div>

			<form ng-submit="addPost()"
				style="margin-top:30px;">
				<h3>Add a new post</h3>

				<div class="form-group">
					<input type="text"
						class="form-control"
						placeholder="Title"
						ng-model="title"></input>
				</div>
				<div class="form-group">
					<input type="text"
					class="form-control"
					placeholder="Link"
					ng-model="link"></input>
				</div>
				<button type="submit" class="btn btn-primary">Post</button>
			</form>
		</script>

		<script type="ng-template" id="/posts.html">
			<div class="page-header">
				<h3>
					<a ng-show="post.link" href="{{post.link}}">
						{{post.title}}
					</a>
					<span ng-hide="post.link">
						{{post.title}}
					</span>
				</h3>
			</div>

			<div ng-repeat="comment in post.comments | orderBy:'-upvotes'">
			<span class="glyphicon...

JavaScript

angular.module('flapperNews', ['ui.router'])

	.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
		$stateProvider
			.state('home', {
				url: '/home',
				templateUrl: '/home.html',
				controller: 'MainCtrl'
			});
			state('posts', {
				url: '/posts/{id}',
				templateUrl: '/posts.html',
				controller: 'PostsCtrl'
			});

		$urlRouterProvider.otherwise('home');
	}])

	.factory('posts', [function(){
		var o = {
			posts: []
		};
		return o;
	}]);

	.controller('MainCtrl', ['$scope', 'posts', function($scope, posts){
		$scope.posts = posts.posts;

		$scope.addPost = function(){
			if (!$scope.title || $scope.title === "") { return; }
			$scope.posts.push({
				title: $scope.title,
				upvotes: 0,
				link: $scope.link,
				comments: [
					{author: 'Joe', body: 'Cool post!', upvotes: 0},
					{author: 'Bob', body: 'Great!', upvotes: 0}
				]
			});
			$scope.title = "";
			$scope.link = "";
		};

		$scope.incrementUpvotes(post) = function(post) {
			post.upvotes += 1;
		};

	.controller('PostsCtrl', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) {
		$scope.post = posts.posts[@stateParams.id];

		$scope.addcomment = function() {
			if ($scope.body === '') {	return; }
			$scope.post.comments.push({
				body: $scope.body,
				author: 'user',
				upvotes: 0
			});
			$scope.body = '';
		};
	}]);


}]);