AngularJS Directive to Directive Communication

var app = angular.module('plunker', []);
app.directive('myApp', function(){
  return{
    templateUrl:'apptemplate.html',
    
  }
});
app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  //networkTwoApp.controller("netController", ['$scope','$q'],function ($scope, $q){
  $scope.phone = "Apple iPhone";
  console.log('Success: ');
    function asyncGreet(name) {
  var deferred = $q.defer();

  setTimeout(function() {
    deferred.notify('About to greet ' + name + '.');
console.log('Success: ');
    if (okToGreet(name)) {
      deferred.resolve('Hello, ' + name + '!');
    } else {
      deferred.reject('Greeting ' + name + ' is not allowed.');
    }
  }, 1000);

  return deferred.promise;
}

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  console.log('Success: ' + greeting);
}, function(reason) {
  console.log('Failed: ' + reason);
}, function(update) {
  console.log('Got notification: ' + update);
});
//});
});

<!DOCTYPE html>
<html ng-app="networkApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
    
    <script src="moduleVerizon.js"></script>
    <script src="moduleSprint.js"></script>
    
  </head>

  <body>
    <div ng-controller="netController">
      
      
      <div class="sprint">
        <h2>SPRINT</h2>
        <div sprint-network
        samsung="phone"
        ng-model="phone"
        >
        
        </div>
    </div>
    
    <div class="verizon">
        
        <h2>VERIZON</h2>
        <span verizon-network
        iphone="phone"
        ng-model="phone"
        type="text"
        >
      
      </span>
    
      </div> 
    
    </div>
  

  </body>

</html>

/* Put your css in here */
.sprint{
    background-color: #ff5;
    padding: 10px;
    margin: 10px;
    
}
.verizon{
    background-color: #c22;
    padding: 10px;
    margin: 10px;
}
h2{
    font-family: verdana, arial;
    font-size: 14px;
}

var networkTwoApp = angular.module("networkApp", []);
networkTwoApp.controller("netController", function ($scope, $q){
  $scope.phone = "Apple iPhone";

});



networkTwoApp.directive("sprintNetwork", function() {
  console.log("networkTwo");
  return {
    restrict: 'AE',
    scope:{
      samsung: "=", 
      //ngModel:"="
    },
    
    templateUrl: "templatesprint.html",
    //require: '^ngModel',
    link: function(scope, element, attrs, ngModel) {
      
      //scope.phone = "samsung phone";
      //scope.phone = ngModel.$viewValue;
     //ngModel.$setViewValue(scope.phone);
     // scope.phone = ngModel.$modelValue;
      //scope.$watch("phone", function(){
        //scope.phone = ngModel.$modelValue;
     // })
     ngModel.$viewChangeListeners.push(function(){
       console.log("sprint view change");
     });
    }
    
  };

});

networkTwoApp.directive("verizonNetwork", function () {
  //window.$scope = verizon;
    return{
        restrict: 'AE',
        scope:{
          //iphone: "=", 
          //ngModel: "="
        },
        
        templateUrl: "templateverizon.html",
        require: '^ngModel',
        link: function (scope, element, attrs, ngModel) {
          scope.phone = "my phone";
          ngModel.$setViewValue(scope.phone); // sets the value of scope.phone in Sprint network
          scope.showPhone = function(){
            ngModel.$setViewValue("setviewvalue");
            //scope.phone = "verizon phone";
            ngModel.$setViewValue(scope.phone);
            console.log("clicked");
          };
          scope.phonedata = "my phone is cool";
          //scope.myphone = phonedata;
          //ngModel.$setViewValue("phonedata");
            
        }
    }
    
});

var networkTwoApp = angular.module("networkApp", []);
networkTwoApp.controller("netController2", function($scope){
  $scope.phonedata = "my phone data";
});

networkTwoApp.directive("verizonNetwork", function () {
  //window.$scope = verizon;
    return{
        restrict: 'AE',
        scope:{
          iphone: "=",  
        },
        
        templateUrl: "templateverizon.html",
        //require: '^ngModel',
        link: function (scope, element, attrs, ngModel) {
          scope.phonedata = "my phone is cool";
          //scope.myphone = phonedata;
          //ngModel.$setViewValue("phonedata");
          
            
        }
        
        
    }
    
});

<h2>Sprint Network</h2>
<span>hello  {{samsung}}</span><br /><br />
<input type="text" ng-model="samsung" />

<h2>Verizon Network</h2>
<p>My Verizon Phone:  {{phone}}</p>
<input type="text" ng-model="ngModel">
<input type="button" value="get my phone" ng-click="showPhone()" />
<select ng-model="phone" ng-init="phone='iPhone 5S'">
  <option value="moto razr">moto rzr</option>
  <option  value="samsung S4">Samsung S4</option>
  <option value="iPhone 5S">iPhone 5S</option>
</select>