JSFiddle - React, Tailwind, and code Playground

HTML

<style>
.wrap_news{
	line-height:20px;
}

	.wrap_news h1{
		display: inline-block;
		margin-right: 40px;
	}
	
	.wrap_news .prev{
		padding: 10px;
		background: yellow;
		cursor: pointer;
	}

	.wrap_news .next{
		padding: 10px;
		background: yellow;
		cursor: pointer;	
	}
	
	.wrap_news ul{
	
	}	
	
		.wrap_news ul li{
		
		}
		
			.wrap_news ul li .date{
				width: 100px;
				overflow: hidden;
				display: inline-block;
				margin-right: 10px;
				
				text-align: right;
			}
			
			.wrap_news ul li .title{
				overflow: hidden;
				display: inline-block;	

				text-align: left;				
			}			
    
</style>    

<div class="wrap_news" ng-app="moduleNews" ng-controller="controllerNews">
			<h1>dynamic news list</h1>
			
			<button class="all_news" ng-model="all" ng-click="all()" ng-hide="flagDisabled">показать все новости</button>
			
			<input class="filter" id="filter" type="text" name="filter" ng-model="searchText" />
			
			<div class="prev" ng-mouseover="mouseOver(-1)" ng-mouseleave="mouseLeave()" ng-hide="flagDisabled">PREV</div>
			
			<ul>
				<li ng-repeat="item in newsVisible | filter:searchText">
				
					<span class="date">{{item.date}}</span>
					
					<span class="title">{{item.title}} - {{$index}}</span>
				</li>
			</ul>
			
			<div class="next" ng-mouseover="mouseOver(1)" ng-mouseleave="mouseLeave()" ng-hide="flagDisabled">NEXT</div>
		</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

JavaScript

var app = angular.module("moduleNews", []);

app.controller("controllerNews", function ($scope, $timeout){
	$scope.currentPosition = 0;
	$scope.qntVisibleRecords = 6;
	$scope.flagDisabled = 0;
	
	$scope.news = [
		{'id': 1, 'title': 'qwerty', 'date': '12.11.2012', 'teaser': 'Вас научат пользоваться им, дадут советы по эксплуатации и покажут возможности того, что Вы приобрели.', 'body': 'Вас научат пользоваться им, дадут советы по эксплуатации и покажут возможности того, что Вы приобрели. CultGoods — это компания, которая специализируется на продукции ни одного бренда, а нескольких, достойных особого разговора и пристального внимания. Наши работники — это специалисты в своей области. Мы продаем компьютеры, мониторы, плееры, телефоны, камеры и многое другое по ценам, соответствующим политике компаний-производителей. Мы работаем, чтобы Вам было удобно. В нашем интернет-магазине Вы можете заказать ни только доставку по Москве и Московской области, но также получить товар в любом другом городе по всей России! Также у нас есть пункт выдачи самовывоза, что позволяет клиенту вплотную пообщаться с нашим персоналом и по'},
		{'id': 2, 'title': 'qwerty доставить', 'date': '12.11.2012', 'teaser': 'Вас научат пользоваться им, дадут советы по эксплуатации и покажут возможности того, что Вы приобрели.', 'body': 'Вас научат пользоваться им, дадут советы по эксплуатации и покажут возможности того, что Вы приобрели. CultGoods — это компания, которая специализируется на продукции ни одного бренда, а нескольких, достойных особого разговора и пристального внимания. Наши работники — это специалисты в своей области. Мы продаем компьютеры, мониторы, плееры, телефоны, камеры и многое другое по ценам, соответствующим политике компаний-производителей. Мы работаем, чтобы Вам было удобно. В нашем интернет-магазине Вы можете заказать ни только доставку по Москве и Московской области, но также получить товар в любом другом городе по всей России! Также у нас есть пункт выдачи самовывоза, что...