<div ng-app="app" class="container-fluid">
  <parent-component color-of-the-sky="Blue">
  </parent-component>


  <script type="text/ng-template" id="parent.template.html">
    <div class="row">
      <div class="col-md-2">
        <h2>{{ vm.display }}  - {{ vm.colorOfTheSky }}</h2>
        <child-component on-change-color="vm.modifyColor(color)" color-of-the-sky="vm.colorOfTheSky">
        </child-component>
      </div>
    </div>
</div>
</script>

<script type="text/ng-template" id="child.template.html">
  <div class="row">
    <div class="col-md-12 form-group">
      <select ng-change="vm.doChangeColor(vm.colorOfTheSky)" ng-model="vm.colorOfTheSky" class="form-control">
        <option value="Red">Red</option>
        <option value="Gray">Gray</option>
        <option value="Blue">Blue</option>
        <option value="Black">Black</option>
     </select>
    </div>
  </div>
  </div>
</script>
</div>
body {
  background: #333;
  color: white;
}
 /*
  *  Component Template with Angular, Lodash and Bootstrap
  *  Components are like an API where Bindings represent Inputs and Outputs
  *  Golden Rule: Never change an object or array property in the component scope
  *
  *  Bindings:
  *  "<" One Way
  *  "=" Two way
  *  "@" Input (Unchangible), provide an evaluated value, {{ vm.sample }}
  *  "&" Outputs 
  *
  */
 (function() {
   "use strict";

   angular
     .module("app", [])
     /* Making Lodash available */
     .constant("_", window._)
     .run(["$rootScope", function($rootScope) {
       $rootScope._ = window._;
     }]);

   angular
     .module("app")
     .component('parentComponent', {
       controller: ParentComponentController,
       controllerAs: "vm",
       templateUrl: "parent.template.html",
       bindings: {
         /* Static expression */
         colorOfTheSky: "@"
       }
     })
   ParentComponentController.$inject = [];

   function ParentComponentController() {
     var vm = this;
     vm.display = "Hello World!"
     vm.modifyColor = modifyColor;

     function modifyColor(color) {
       vm.colorOfTheSky = color;
     }
   }

   angular
     .module("app")
     .component('childComponent', {
       controller: ChildComponentController,
       controllerAs: "vm",
       templateUrl: "child.template.html",
       /*
        * colorOfTheSky - one way incoming
        * onChangeColor outgoing
        */
       bindings: {
         colorOfTheSky: "<",
         onChangeColor: "&"
       }
     });

   function ChildComponentController() {
     var vm = this;

     vm.doChangeColor = function(passedVar) {
       vm.onChangeColor({
         color: passedVar
       });
     };
   }

 })();
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.16.2/lodash.min.js