<!DOCTYPE html>
<html>

  <head>
    <title>AngularJS Tutorials : Defining a Method on the Scope : http://egghead.io/video/Powr9vzqMac</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/3.2.5/stylesheets/foundation.min.css" />
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <!--
    
    Define a method on your controller. 
    By passing in data.message you avoid creating a dependency on your $scope in the method
    e.g. this is not ideal: return $scope.data.message.split("").reverse().join("");
    
    For the functionality in this example a Filter would be a better solution, see:
    http://plnkr.co/edit/L5qhxf
    
    -->
  </head>

  <body>
    <div ng-app="myApp">
    
    
      <div ng-controller="FirstCtrl">
        <input type="text" ng-model="data.message">
        <h1>{{data.message}}</h1>
      </div>
      
      
      <div ng-controller="SecondCtrl">
        <input type="text" ng-model="data.message">
        <h1>{{reversedMessage(data.message)}}</h1>
      </div>
      
      
    </div>
  </body>

</html>

var myApp = angular.module('myApp', []);
myApp.factory('Data', function(){
  return { message: "I'm data from a service" };
})

function FirstCtrl($scope, Data) {
  $scope.data = Data;
}

function SecondCtrl($scope, Data){
  $scope.data = Data;
  
  $scope.reversedMessage = function(message){
    return message.split("").reverse().join("");
  }
}
/* Styles go here */