Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="MyCtrl">
    <input type="text" ng-model="newitem.name"/>
    <button type="button" ng-click="addNewItem(newitem)">Add Item</button>
    <menu items="items"/>
  </div>
</body>
</html>
 
var app = angular.module("app", []);
​
app.controller('MyCtrl', function($scope) {
  $scope.items = [
    {name: "item1"},
    {name: "item2"},
    {name: "item3"},
    {name: "item4"}
  ];
    
  $scope.addNewItem = function(newItem) {
    $scope.items.push(angular.copy(newItem));
    console.log("added");
  };
});
​
app.directive("menu", function(){
  return {
    restrict: "E",
    scope: {
      items: "=" 
    },
    template: "<div ng-repeat='item in items'>{{item.name}}</div>"
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers