aweary/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
.warning {
  color: tomato;
}

.success {
  color: lightgreen;
}
</style>
</head>
<body ng-app="myApp">


<div ng-controller="MyCtrl">

  <h1 ng-show="titleShow" class="{{color}}">App Title</h1>
  <button ng-click="toggleTitle()">Toggle title</button>

   <button ng-click="toggleColor()">Toggle color</button


  <br><br><br>


 <ul ng-repeat="student in students">

   <li ng-click="remove($index)">{{student.name}} {{$index}} <button ng-click="remove($index)">remove</button></li>
  </ul>
  <button ng-click="addBrandon()">Add Student</button>
</div>

<script id="jsbin-javascript">
var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});


function MyCtrl($scope) {


    $scope.titleShow = true;
    $scope.toggleTitle = function(){
      $scope.titleShow = !$scope.titleShow
    }

    $scope.students = [{name: "Brandon Dail", id: 1},
                      {name: "Teri Yesh", id: 2},
                       {name: "Navi", id: 3}
                      ]
     $scope.remove = function($index){
       $scope.students.splice($index, 1);
     }
    $scope.addBrandon = function(){
      $scope.students.push({name: "student "});
    }


    $scope.color = "warning";


  $scope.toggleColor = function(){
    if($scope.color == "warning")
        $scope.color = "success"
    else
        $scope.color = "warning"
  };


}
</script>

<script id="jsbin-source-html" type="text/html"><!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="myApp">


<div ng-controller="MyCtrl">

  <h1 ng-show="titleShow" class="{{color}}">App Title</h1>
  <button ng-click="toggleTitle()">Toggle title</button>

   <button ng-click="toggleColor()">Toggle color</button


  <br><br><br>


 <ul ng-repeat="student in students">

   <li ng-click="remove($index)">{{student.name}} {{$index}} <button ng-click="remove($index)">remove</button></li>
  </ul>
  <button ng-click="addBrandon()">Add Student</button>
</div>

</body>
</html></script>

<script id="jsbin-source-css" type="text/css">.warning {
  color: tomato;
}

.success {
  color: lightgreen;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});


function MyCtrl($scope) {


    $scope.titleShow = true;
    $scope.toggleTitle = function(){
      $scope.titleShow = !$scope.titleShow
    }

    $scope.students = [{name: "Brandon Dail", id: 1},
                      {name: "Teri Yesh", id: 2},
                       {name: "Navi", id: 3}
                      ]
     $scope.remove = function($index){
       $scope.students.splice($index, 1);
     }
    $scope.addBrandon = function(){
      $scope.students.push({name: "student "});
    }


    $scope.color = "warning";


  $scope.toggleColor = function(){
    if($scope.color == "warning")
        $scope.color = "success"
    else
        $scope.color = "warning"
  };


}</script></body>
</html>

## jsbin.fufoha.css
.warning {
  color: tomato;
}

.success {
  color: lightgreen;
}

## jsbin.fufoha.js
var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});


function MyCtrl($scope) {


    $scope.titleShow = true;
    $scope.toggleTitle = function(){
      $scope.titleShow = !$scope.titleShow
    }

    $scope.students = [{name: "Brandon Dail", id: 1},
                      {name: "Teri Yesh", id: 2},
                       {name: "Navi", id: 3}
                      ]
     $scope.remove = function($index){
       $scope.students.splice($index, 1);
     }
    $scope.addBrandon = function(){
      $scope.students.push({name: "student "});
    }


    $scope.color = "warning";


  $scope.toggleColor = function(){
    if($scope.color == "warning")
        $scope.color = "success"
    else
        $scope.color = "warning"
  };


}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.warning {
	color: tomato;
	}

	.success {
	color: lightgreen;
	}
	</style>
	</head>
	<body ng-app="myApp">


	<div ng-controller="MyCtrl">

	<h1 ng-show="titleShow" class="{{color}}">App Title</h1>
	<button ng-click="toggleTitle()">Toggle title</button>

	<button ng-click="toggleColor()">Toggle color</button


	<br><br><br>



	<ul ng-repeat="student in students">

	<li ng-click="remove($index)">{{student.name}} {{$index}} <button ng-click="remove($index)">remove</button></li>
	</ul>
	<button ng-click="addBrandon()">Add Student</button>
	</div>

	<script id="jsbin-javascript">
	var myApp = angular.module('myApp',[]);

	//myApp.directive('myDirective', function() {});
	//myApp.factory('myService', function() {});




	function MyCtrl($scope) {


	$scope.titleShow = true;
	$scope.toggleTitle = function(){
	$scope.titleShow = !$scope.titleShow
	}

	$scope.students = [{name: "Brandon Dail", id: 1},
	{name: "Teri Yesh", id: 2},
	{name: "Navi", id: 3}
	]
	$scope.remove = function($index){
	$scope.students.splice($index, 1);
	}
	$scope.addBrandon = function(){
	$scope.students.push({name: "student "});
	}




	$scope.color = "warning";


	$scope.toggleColor = function(){
	if($scope.color == "warning")
	$scope.color = "success"
	else
	$scope.color = "warning"
	};



	}
	</script>

	<script id="jsbin-source-html" type="text/html"><!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="myApp">


	<div ng-controller="MyCtrl">

	<h1 ng-show="titleShow" class="{{color}}">App Title</h1>
	<button ng-click="toggleTitle()">Toggle title</button>

	<button ng-click="toggleColor()">Toggle color</button


	<br><br><br>



	<ul ng-repeat="student in students">

	<li ng-click="remove($index)">{{student.name}} {{$index}} <button ng-click="remove($index)">remove</button></li>
	</ul>
	<button ng-click="addBrandon()">Add Student</button>
	</div>

	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">.warning {
	color: tomato;
	}

	.success {
	color: lightgreen;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var myApp = angular.module('myApp',[]);

	//myApp.directive('myDirective', function() {});
	//myApp.factory('myService', function() {});




	function MyCtrl($scope) {


	$scope.titleShow = true;
	$scope.toggleTitle = function(){
	$scope.titleShow = !$scope.titleShow
	}

	$scope.students = [{name: "Brandon Dail", id: 1},
	{name: "Teri Yesh", id: 2},
	{name: "Navi", id: 3}
	]
	$scope.remove = function($index){
	$scope.students.splice($index, 1);
	}
	$scope.addBrandon = function(){
	$scope.students.push({name: "student "});
	}




	$scope.color = "warning";


	$scope.toggleColor = function(){
	if($scope.color == "warning")
	$scope.color = "success"
	else
	$scope.color = "warning"
	};



	}</script></body>
	</html>