Here is a very simple application that lets the user change his name. However, there is some bug in this code. Whenever the user writes something into input, the change is not reflected in the welcome header.

app.js

```
'use strict';

angular
  .module('angularScopesBug', [])
  .controller("WelcomeController", function ($scope) {
    $scope.name = 'John Doe';

    $scope.getName = function() {
      return $scope.name;
    };
  })
  .controller("EditingController", function($scope) {
    $scope.editMode = false;
    $scope.changeName = function() {
      $scope.editMode = true;
    };
    $scope.closeEditor = function() {
      $scope.editMode = false;
    };
  })
  .directive("nameEditor", function () {
    return {
      template: 'Write your name: <input type="text" ng-model="name">'
    };
  });

```

index.html

```
<div ng-app="angularScopesBug" ng-controller="WelcomeController">
  <h1>Hello, {{ getName() }}</h1>
  <div ng-controller="EditingController">
    <button ng-click="changeName()" ng-show="!editMode">Change your name</button>

    <div ng-show="editMode">
      <name-editor ng-show="editMode"></name-editor>
      <button ng-click="closeEditor()" ng-show="editMode">Close name editor</button>
    </div>
  </div>
</div>

```

The header should change according to the input.