Angular JS JSON Editor Error: [$compile:nonassign]
<p>I am trying to use the <a href="https://github.com/duychinhnguyenvn/angular-json-editor" rel="nofollow">angular js editor</a> (It is a directive which is built on top of <a href="https://github.com/josdejong/jsoneditor" rel="nofollow">jquery json editor</a>)</p>

<p>But i am getting the following error: <a href="https://docs.angularjs.org/error/$compile/nonassign?p0=undefined&amp;p1=jsonEditorInput" rel="nofollow">Error: [$compile:nonassign] Expression 'undefined' used with directive 'jsonEditorInput' is non-assignable!</a></p>

<p>Please find my code as follows:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var app=angular.module("myApp",["angular-json-editor"]);
   app.controller("myController",function($scope){

      $scope.people={            
                "name": "Mr A. Payne",
                "age": 35,
                "company name": "ARAMARK Ltd." ,
                "address": {
                  "street": "30 Commercial Road",
                  "city area/district" : "Fratton",
                  "city/town/village" : "PORTSMOUTH",
                  "county": "Hampshire",
                  "postal code": "PO1 1AA"
                }            
      };
      

    
      $scope.onError=function(err){
        alert(err);
      };

    $scope.options={
     "mode": "code",
        "modes": ['tree','form', 'code', 'text'],     
        "history": false
    };
  $scope.download=function(){
   ga('send', {
     'hitType': 'event',          // Required.
     'eventCategory': 'button',   // Required.
     'eventAction': 'download',      // Required.
     'eventLabel': 'nav buttons',
     'eventValue': 1
   });
  };
   });</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;html ng-app="myApp"&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
    &lt;!-- Meta, title, CSS, favicons, etc. --&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

    &lt;title&gt;Node All Admin | &lt;/title&gt;

    &lt;link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet"&gt;
    &lt;script src="lib/jsoneditor/dist/jsoneditor.css"&gt;&lt;/script&gt;
    &lt;link href="lib/angular-json-editor/angular-json-editor.css" rel="stylesheet" type="text/css"&gt;

&lt;/head&gt;

&lt;body ng-controller="myController" class="nav-md"&gt;
    &lt;json-editor-input model="people"/&gt;


    &lt;br/&gt;&lt;br/&gt;&lt;br/&gt; 
    &lt;json-editor-input model="people" on-error="onError(err)"/&gt;

    &lt;br/&gt;&lt;br/&gt;&lt;br/&gt; 
    &lt;div json-editor model="people" options="options" style="height: 400px;"/&gt;
&lt;/body&gt;
  

&lt;script src="lib/jquery/dist/jquery.js"&gt;&lt;/script&gt;
&lt;script src="lib/jsoneditor/dist/jsoneditor.js"&gt;&lt;/script&gt;
&lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
&lt;script src="lib/angular-json-editor/angular-json-editor.js"&gt;&lt;/script&gt;
&lt;script src="app.js"&gt;&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>