Angular 1 Component Example

<!DOCTYPE html>
<html>

  <head>
    <title>Angular 1.X QuickStart</title>
    <!-- 1. Load libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <script src="src/app.js"></script>
    <script src="src/product-item.component.js"></script>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <app-component></app-component>
    <script>
      angular.element(document).ready(function() {
        angular.bootstrap(document, ['app']);
      });
    </script>
  </body>
</html>

/* Styles go here */

.bold-text {
  font-weight: bold;
}

.green {
  color: green;
}

.blue {
  color: blue;
}

.red {
  color: red;
}

.show-class {
  visibility: visible;
}

.hide-class {
  visibility: hidden;
}

.italic-text {
  font-style: italic;
}

.small-text {
  font-size: 10px;
}

angular.module('app', [])
.component('appComponent', {
      template: [
        '<div ng-repeat="product in $ctrl.products">',
          '<product-item product="product" on-select="$ctrl.selectedProduct = $event"></product-item>',
        '</div>',
        '<hr />',
        '<h3>{{$ctrl.selectedProduct.name}}</h3>',
        '<p>{{$ctrl.selectedProduct.price | currency}}</p>',
      ].join(''),
      controller: function () {
        this.products = [
          { name: 'iPhone', price: 500.00 },
          { name: 'iPad', price: 800.00 },
          { name: 'Macbook', price: 1200.00 }
        ];
        
        this.selectedProduct = this.products[0];
      }
});

angular
	.module('app')
	.component('productItem', {
        bindings: {
          product: '<',
          onSelect: '&'
        },
        template: [
          '<div class="product">',
            '<button ng-click="$ctrl.onSelect({$event: $ctrl.product})">Buy</button> ',
            '{{$ctrl.product.name}}',
          '</div>'
        ].join('')
    });