AngularJS view doesn't update when ng-model value changed

After

$scope.name = '';

Do a

$scope.$apply();

When you use other libraries like jquery in angular, changes to variables like $scope should manually broadcast.

 $('#clickMeToReset').on('click', function(){
        $scope.name = '';
        $scope.$apply();
})

so $scope.$apply(); will do the trick!

Modify your controller code with the following:

controller: function($location,$scope, $timeout){
  $scope.name = 'myname';
  $('#clickMeToReset').on('click', function(){
    $timeout(function() {
       $scope.name = '';
    });
  })
}

angular.module('mainApp', [])
  .directive('myTab', function() {
    return {
      restrict: 'E',
      template: 'name: <input type="text" ng-model="name">',
      controller: function($location, $scope, $timeout) {
        $scope.name = 'myname';
        $('#clickMeToReset').on('click', function() {
          $timeout(function() {
            $scope.name = '';
          });
        })
      }
    };
  })
  .directive('myMenu', function() {
    return {
      restrict: 'E',
      template: '<button id="clickMeToReset">click me to reset name</button>'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mainApp">
  <my-menu></my-menu>
  <my-tab></my-tab>
</div>

Since you are using jQuery to change the value, which is out of the Angular's context, so Angular is unaware of the change. So you need to tell Angular that something has changed. So we are using $timeout service to achieve this. We can also use $scope.$apply() but that may fail when the digest cycle is already in progress.

Important

You should use ng-click instead and remove dependency of jQuery if possible since jQuery is also a big library in itself like Angular (see a working example below):

angular.module('mainApp', [])
  .directive('myTab', function() {
    return {
      restrict: 'E',
      template: 'name: <input type="text" ng-model="name">',
      controller: function($scope) {
        $scope.name = 'myname';
        $scope.clearName = function() {
          $scope.name = '';
        }
      }
    };
  })
  .directive('myMenu', function() {
    return {
      restrict: 'E',
      template: '<button ng-click="clearName()">click me to reset name</button>'
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="mainApp">
  <my-menu></my-menu>
  <my-tab></my-tab>
</div>

I hope According to my thinking this code help you . Only change Js code remaining HTML code is proper.

   var mainApp = angular.module('mainApp', []);
   mainApp.directive('myTab', function() {
   return {
    template: 'name: <input type="text" ng-model="name">',
    controller: function($location,$scope){ debugger;
      $scope.name = 'myname';
      $('#clickMeToReset').on('click', function(){
        $scope.name = '';
      })
    }
  };
})
.directive('myMenu', function() {
  return {
    name:"clickMeReset",
    template: '<button id="name" ng-click="clear()">click me to reset name</button>',
    controller:
    function($location,$scope){
      $('#name').on('click',       function(){
        $scope.name = '';
      })
    }
  };
});