AngularJS Example:

by nickadeemus2002

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="testApp">
  <h2>Testing Items</h2>
  <div ng-controller="TodoCtrl">
    <ul>
      <li class="orphan">
        <span> Item is not in angular control ... </span>
       </li>
      <li ng-repeat="todo in todos">
        <span> {{ todo.text }} </span>
      </li>
      <li class="orphan">
        <span> ... Another itefm not in Angular control. </span>
       </li>      
      <li ng-repeat="plan in plans">
        <span> {{ plan.text }} </span>
      </li>      
    </ul>
  </div>
</div>

CSS

ul {
   border:1px solid #585858;
}
ul li {
  border: 2px solid #ff0000;
  margin: 20px;
  padding: 15px 10px;
}
ul li.orphan {
  border: 2px solid #2E2EFE;
}

JavaScript

angular.module('testApp', [])
	.controller('TodoCtrl', ['$scope', function($scope){
  	  $scope.todos = [
    		{text:'learn angular', done:true},
    		{text:'build an angular app', done:false}
  		];

  		$scope.plans = [
  		];
      
      $scope.showPlan = function(){
    		console.log("showPlan: ", $scope.plan);
      }
  	}]);


/*
function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}
  ];

  $scope.plans = [
  ];

	$scope.show = function(data){
  	console.log('show->data: ', data);
  }
  
}



*/