var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
var vm =this
vm.elements=["test","test2"];
vm.addElement = addElement;
function addElement(element) {
console.log('hi');
vm.elements.push(element);
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script src="https://code.angularjs.org/1.5.4/angular.js"></script>
<!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
<!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">
<form name="myForm">
<div layout="row">
<label>Element
<input type="text" name="input" ng-model="vm.element">
</label>
<button ng-click="vm.addElement(vm.element)">
Increment
</button>
<div>
<div layout="row">{{vm.elements}}
<ul>
<li ng-repeat="elt in vm.elements" class="">
<div ng-if="$index %3 ==0" > <font size="3" color="red">{{elt}}{{$index}}</font></div>
<div ng-if="$index %3 !==0" >{{elt}}-{{$index}}</div>
</li>
</ul>
</div>
</form>
</body>
</html>
/* Put your css in here */