Angular.js hello world

Start point to angular fiddles.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>

<div ng-app="myApp">
   
<div  ng-controller="parentController">
      <select class="form-control" 
  ng-change="change()" 
  ng-model="value" 
  id="p_client_main" 
  name="p_client_main" 
  tabindex="2">
    <option value=""> </option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>
</div>

<div ng-controller="otherController">
<ul>
<li ng-repeat="item in items  track by $index"  >{{item}}</li>
</ul>
</div>
</div>

JavaScript

var app = angular.module('myApp', []);
 app.service('productService', function() {
   var productList = ["x"];

   var addProduct = function(newObj) {
     productList.push(newObj);
   };

   var getProducts = function(){
    return productList;
   };

   return {
     addProduct: addProduct,
     getProducts: getProducts
   };
 });


app.controller('otherController', function($scope,productService) {
 $scope.items = productService.getProducts();
});

app.controller('parentController', function ($scope,productService) {
          $scope.change = function () {
            console.log($scope.value);
            productService.addProduct($scope.value);
            
          }
});