AngularJS Example:

Without watcher

by sathish panduga p

HTML

<div ng-app>
<div ng-controller="rdCtrl">
   <div id="tags" style="border:none;width:370px;margin-left:300px;">
                    <span class="tag" style="padding:10px;background-color:#808080;margin-left:10px;margin-right:10px;" ng-repeat="data in dataset" id="4">{{data.name}}</span>
                    <div>
                        <input type="text" style="margin-left:-5px;" id="inptags" value="" placeholder="Add ur 5 main categories (enter ,)" ng-model="inputVal" />
                      <button type="submit" ng-click="addToData()">Submit</button>
                        <img src="../../../static/app/img/accept.png" ng-click="assign()" id="assign" style="cursor:pointer;display:none" />
                    </div>
           </div>

    <div id="status" style="margin-top:100px;"></div>
  </div>
</div>

CSS

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

JavaScript

function rdCtrl($scope){
  $scope.dataset = [];
  $scope.inputVal = "";
  $scope.removeData = function(index){
    $scope.dataset.splice(index, 1);
  }
  $scope.addToData = function(){
    $scope.dataset.push(
      {"id": $scope.dataset.length+1,
       "name": $scope.inputVal,
      "value": 3}
    );
    $scope.inputVal = "";
    alert(JSON.stringify($scope.dataset,null,2));
  }
}