JSFiddle - React, Tailwind, and code Playground

HTML

<title>Angular Örnek</title>
 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">	
	 
 
 
<body ng-app="app">

<div class="main" ng-controller="ctrlapp">
	<div class="sag">
			<h1>Gider</h1>
			<form>
					Tutar<input type="number" placeholder="Tutar" class="form-control" placeholder="Text input" style="width: 150px;" ng-model="tutar">
					Açıklama<textarea class="form-control" placeholder="Acıklama" rows="3" ng-model="aciklama" ></textarea>
					<input type="submit" class="btn btn-default" ng-click="ekle()" ><br>  <div>{{toplam()}}</div>
					<input type="reset" class="btn btn-danger"> 

					<div class="liste"  ng-repeat="names in name" style="color:red">
						<ul>
							<li>{{names.ucret}}</li>
							<li> {{names.aciklama}}</li>
						</ul>
					</div>
			</form>	
	</div>

	<div class="sol" ng-controller="ctrlapp2">
		<h1>Gelir</h1>
		<form>
		 Tutar<input  type="number" placeholder="Tutar" class="form-control" ng-model="gider" style="width: 150px;">
		 Açıklama<textarea class="form-control" placeholder="Acıklama" rows="3" ng-model="acik"></textarea>
		 <input type="submit" class="btn btn-default" ng-click="ekle()" ><br><div>{{toplam()}}</div> 
		 <input type="reset" class="btn btn-danger"> 
		 <ul ng-repeat="gelirler in gelir" class="gelir">
		 	<li>{{gelirler.ucret}}</li>
		 	<li>{{gelirler.aciklama}}</li>
		 </ul>
	</div>
</form>

CSS

.sol{float:left;padding: 10px;margin-left: 300px}
.sag{float:right;padding: 10px;margin-right: 500px;margin-top: 5px}
.liste ul{list-style-type:none;}
.liste ul li{float: left;padding: 10px}
.gelir{color:green;}
.gelir li{list-style-type: none;padding-top:20px;float: left;margin: 4px}
h3{width:20px}

JavaScript

var app = angular.module('app',[])
    .controller('ctrlapp',function($scope){
		$scope.name=[{ucret:1200,aciklama : "mazot"}];

		$scope.ekle = function(){
			 $scope.name.push({ucret:$scope.tutar},{aciklama:$scope.aciklama}); 
			 console.log(1);
		};

		$scope.toplam = function(){
			return $scope.name.length;
		};

	}).controller('ctrlapp2',function($scope){
		 $scope.gelir = [{ucret:1000,aciklama:"general spare"}];
		 
		 $scope.ekle = function(){
		 	$scope.gelir.push({ucret:$scope.gider},{aciklama:$scope.acik});
		 };

		 $scope.toplam = function(){
		 	return $scope.gelir.length;
		 };
	});