I have two simple files: `leads.html` and `leadsController.js`. I want to have `leadsController.js` as a linked javaScript file in `leads.html`. When I link it using the following code `<script src = "leadsController.js"></script>` in my `leads.html` ... `leads.html` does not render properly.

However, when I include the contents of `leadsController.js` as a part of the code of `leads.html` it works.

Am I not linking the .js file correctly?

Below is what works and what doesn't.

**I want this to work when connected to `leadsController.js`**

Yes ... it's in the same directory.

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

    <div ng-app = "myApp" ng-controller = "myCtrl">

      <h1>Hello, world!</h1>

      <ul>
        <li ng-repeat = "x in myData">{{ x.id }}</li>
      </ul>

    </div>
    <script src = "leadsController.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

```

`leadsController.js` looks like this:

```
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("https://clearmaze.net/test/newAdmin/leadsData.php").then(function (response) {
      $scope.myData = response.data.records;
  });
});

```

**This works:**

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  </head>
  <body>

    <div ng-app = "myApp" ng-controller = "myCtrl">

      <h1>Hello, world!</h1>

      <ul>
        <li ng-repeat = "x in myData">{{ x.id }}</li>
      </ul>

    </div>
    <script>

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
      $http.get("leadsData.php").then(function (response) {
          $scope.myData = response.data.records;
      });
    });

    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

```