adamweeks/index.html

## index.html
<!DOCTYPE html>
<html ng-app="demo">
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>Angular Demo</title>
</head>
<body ng-controller="DemoController as vm">
  <h2>Controller Binding</h2>
  <div class="well" ng-if="!vm.registered">
    <p><h3>Welcome, please register</h3></p>
    <p>Name: <input ng-model="vm.inputValue"></p>
    <p><button ng-click="vm.register(vm.inputValue)">Register!</button>
  </div>
  <div class="well" ng-if="vm.registered && !vm.donutsOrdered">
    <demo-directive
                    string-bind="{{vm.myName}}"
                    object-bind="vm.donutAmount"
                    function-bind="vm.orderDonuts()">
      </demo-directive>
  </div>
  <div class="well" ng-if="vm.donutsOrdered">
    <h3>{{vm.myName}}, Your Donuts are Ordered!</h3>
    <p>Your shipment of:</p>
    <p><mark>{{vm.donutAmount}}</mark> donuts</p>
    <p>is now processing.</p>
  </div>
<script id="jsbin-javascript">
(function(){
  angular.module("demo",[])
  .controller('DemoController', DemoController)
  .controller('DemoDirectiveController', DemoDirectiveController)
  .directive('demoDirective', DemoDirective)
;
  function DemoController(){
    var vm = this;

    vm.hello = "Hi There! ";

    vm.welcome = vm.hello;
    vm.registered = false;
    vm.donutsOrdered = false;
    vm.myName = '';

    vm.register = function(name){
      if(name){
        vm.myName = name;
        vm.registered =true;
      }
    };

    vm.orderDonuts = function(){
      vm.donutsOrdered = true;
    };

  }

  function DemoDirectiveController(){

  }

  function DemoDirective(){
     return {
       restrict: 'E',
       scope: {
         stringBind: '@',
         objectBind: '=',
         functionBind: '&'
       },
       template: [
         '<p>Hello, {{vm.stringBind}}! Please order donuts:</p>',
         '<p>Quantity: <input ng-model="vm.objectBind"></p>',
         '<p><button ng-click="vm.functionBind()">Order Donuts!</button>'
       ].join(''),
       controller: 'DemoDirectiveController',
       controllerAs: 'vm',
       bindToController: true
     };
  }
})();
</script>


<script id="jsbin-source-javascript" type="text/javascript">(function(){
  angular.module("demo",[])
  .controller('DemoController', DemoController)
  .controller('DemoDirectiveController', DemoDirectiveController)
  .directive('demoDirective', DemoDirective)
;
  function DemoController(){
    var vm = this;

    vm.hello = "Hi There! ";

    vm.welcome = vm.hello;
    vm.registered = false;
    vm.donutsOrdered = false;
    vm.myName = '';

    vm.register = function(name){
      if(name){
        vm.myName = name;
        vm.registered =true;
      }
    };

    vm.orderDonuts = function(){
      vm.donutsOrdered = true;
    };

  }

  function DemoDirectiveController(){

  }

  function DemoDirective(){
     return {
       restrict: 'E',
       scope: {
         stringBind: '@',
         objectBind: '=',
         functionBind: '&'
       },
       template: [
         '<p>Hello, {{vm.stringBind}}! Please order donuts:</p>',
         '<p>Quantity: <input ng-model="vm.objectBind"></p>',
         '<p><button ng-click="vm.functionBind()">Order Donuts!</button>'
       ].join(''),
       controller: 'DemoDirectiveController',
       controllerAs: 'vm',
       bindToController: true
     };
  }
})();</script></body>
</html>

## jsbin.jigiyozeya.js
(function(){
  angular.module("demo",[])
  .controller('DemoController', DemoController)
  .controller('DemoDirectiveController', DemoDirectiveController)
  .directive('demoDirective', DemoDirective)
;
  function DemoController(){
    var vm = this;

    vm.hello = "Hi There! ";

    vm.welcome = vm.hello;
    vm.registered = false;
    vm.donutsOrdered = false;
    vm.myName = '';

    vm.register = function(name){
      if(name){
        vm.myName = name;
        vm.registered =true;
      }
    };

    vm.orderDonuts = function(){
      vm.donutsOrdered = true;
    };

  }

  function DemoDirectiveController(){

  }

  function DemoDirective(){
     return {
       restrict: 'E',
       scope: {
         stringBind: '@',
         objectBind: '=',
         functionBind: '&'
       },
       template: [
         '<p>Hello, {{vm.stringBind}}! Please order donuts:</p>',
         '<p>Quantity: <input ng-model="vm.objectBind"></p>',
         '<p><button ng-click="vm.functionBind()">Order Donuts!</button>'
       ].join(''),
       controller: 'DemoDirectiveController',
       controllerAs: 'vm',
       bindToController: true
     };
  }
})();
	<!DOCTYPE html>
	<html ng-app="demo">
	<head>
	<script src="https://code.jquery.com/jquery.min.js"></script>
	<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
	<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<meta charset="utf-8">
	<title>Angular Demo</title>
	</head>
	<body ng-controller="DemoController as vm">
	<h2>Controller Binding</h2>
	<div class="well" ng-if="!vm.registered">
	<p><h3>Welcome, please register</h3></p>
	<p>Name: <input ng-model="vm.inputValue"></p>
	<p><button ng-click="vm.register(vm.inputValue)">Register!</button>
	</div>
	<div class="well" ng-if="vm.registered && !vm.donutsOrdered">
	<demo-directive
	string-bind="{{vm.myName}}"
	object-bind="vm.donutAmount"
	function-bind="vm.orderDonuts()">
	</demo-directive>
	</div>
	<div class="well" ng-if="vm.donutsOrdered">
	<h3>{{vm.myName}}, Your Donuts are Ordered!</h3>
	<p>Your shipment of:</p>
	<p><mark>{{vm.donutAmount}}</mark> donuts</p>
	<p>is now processing.</p>
	</div>
	<script id="jsbin-javascript">
	(function(){
	angular.module("demo",[])
	.controller('DemoController', DemoController)
	.controller('DemoDirectiveController', DemoDirectiveController)
	.directive('demoDirective', DemoDirective)
	;
	function DemoController(){
	var vm = this;

	vm.hello = "Hi There! ";

	vm.welcome = vm.hello;
	vm.registered = false;
	vm.donutsOrdered = false;
	vm.myName = '';

	vm.register = function(name){
	if(name){
	vm.myName = name;
	vm.registered =true;
	}
	};

	vm.orderDonuts = function(){
	vm.donutsOrdered = true;
	};

	}

	function DemoDirectiveController(){

	}

	function DemoDirective(){
	return {
	restrict: 'E',
	scope: {
	stringBind: '@',
	objectBind: '=',
	functionBind: '&'
	},
	template: [
	'<p>Hello, {{vm.stringBind}}! Please order donuts:</p>',
	'<p>Quantity: <input ng-model="vm.objectBind"></p>',
	'<p><button ng-click="vm.functionBind()">Order Donuts!</button>'
	].join(''),
	controller: 'DemoDirectiveController',
	controllerAs: 'vm',
	bindToController: true
	};
	}
	})();
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">(function(){
	angular.module("demo",[])
	.controller('DemoController', DemoController)
	.controller('DemoDirectiveController', DemoDirectiveController)
	.directive('demoDirective', DemoDirective)
	;
	function DemoController(){
	var vm = this;

	vm.hello = "Hi There! ";

	vm.welcome = vm.hello;
	vm.registered = false;
	vm.donutsOrdered = false;
	vm.myName = '';

	vm.register = function(name){
	if(name){
	vm.myName = name;
	vm.registered =true;
	}
	};

	vm.orderDonuts = function(){
	vm.donutsOrdered = true;
	};

	}

	function DemoDirectiveController(){

	}

	function DemoDirective(){
	return {
	restrict: 'E',
	scope: {
	stringBind: '@',
	objectBind: '=',
	functionBind: '&'
	},
	template: [
	'<p>Hello, {{vm.stringBind}}! Please order donuts:</p>',
	'<p>Quantity: <input ng-model="vm.objectBind"></p>',
	'<p><button ng-click="vm.functionBind()">Order Donuts!</button>'
	].join(''),
	controller: 'DemoDirectiveController',
	controllerAs: 'vm',
	bindToController: true
	};
	}
	})();</script></body>
	</html>