UI Angular Bootstrap (version 0.8.0), passing a scope to Modal

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.8.0.js"></script>
  <script src="example.js"></script>

  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="DialogDemoCtrl">
    <div class="container">
      <div class="row-fluid">
        <div class="span6">
          <label class="checkbox">
            <input type=checkbox ng-model="opts.backdrop">Show backdrop</label>
          <label class="checkbox">
            <input type=checkbox ng-model="opts.dialogFade">Fade modal dialog</label>
          <label class="checkbox">
            <input type=checkbox ng-disabled="!opts.backdrop" ng-model="opts.backdropFade">Fade Backdrop</label>
          <hr>
          <label class="checkbox">
            <input type=checkbox ng-model="opts.keyboard">Close on Escape</label>
          <label class="checkbox">
            <input type=checkbox ng-disabled="!opts.backdrop" ng-model="opts.backdropClick">Close on backdrop click</label>
        </div>
        <div class="span6">
          <p>Change options at will and press the open dialog button below!</p>
          <p>
            <button class="btn btn-primary" ng-click="openDialog()">Open Dialog</button>
          </p>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

angular.module('plunker', ['ui.bootstrap']);

function DialogDemoCtrl($scope, $rootScope, $modal) {
  $scope.error = {
    title: "DialogDemoCtrl",
    message: "Some error message",
   
  };

  $scope.opts = {
    backdrop: true,
    keyboard: true,
    backdropClick: true,
    scope: (function() {
      var scope = $rootScope.$new();
      scope.error = $scope.error;
      return scope
    })(),
    templateUrl: 'dialog_template.html',
    controller: 'TestDialogController'
  };

  $scope.openDialog = function() {
    var d = $modal.open($scope.opts);
    d.result.then(function(result) {
      if (result) {
        alert('dialog closed with result: ' + result);
      }
    },
    function(error){ alert("error")});
  };
}

// The scope of this controller is defined in $scope.opts.scope
function TestDialogController($scope, $modalInstance) {
  // Default error message if no message is passed
  $scope.error = $scope.error || {
    title: "TestDialogController",
    message: "Default error message"
    
  };
    $scope.istrue=false;
   
 $scope.$watch('error.title',function(test , old)
 {    if(test=="")
 {
  $scope.istrue=true;
    alert(test);
   
 }});
  $scope.close = function(result) {
    
     if($scope.error.title=="")
 {
   $error.name=true;
    alert($scope.error.title);
    return false;
 }
    result= $scope.error.title;
    $modalInstance.close(result);
  };
}

.modal {
display: block;
height: 0;
overflow: visible;
}

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" ng-click="close()" aria-hidden="true">&times;</button>
            <h4 class="modal-title">{{error.title}}</h4>
            </div>
        <div class="modal-body">
            <p>{{error.message}}{{istrue}}</p>
              <input type="text" ng-model="error.title" >
            </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="close()">Close</button>
            <!--<button type="button" class="btn btn-primary" ng-click="close()">Save changes</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->