Cannot resolve custom directive tag whilst it does suggest the tag?

When adding elements my custom directive gets suggested:

However once I complete it, it cannot be resolved.

First part of code for directive:
```JS

/**
* @ngdoc directive
* @name lxnInput
* @restrict E
* @scope
* @param {object} lxn-options configuration object for direcctive}
*/

(function() {
var lexiaNumberDirectives = angular.module("lexiaNumberDirectives", []);

lexiaNumberDirectives.directive("lxnInput", function () {
return {
//Restrict to usage only
restrict: 'E',
require: 'ngModel',
scope: {
ngModel: '=ngModel',
ngDisabled: '&',
lxOptions: '@lxnOptions'
},

```

The javascript file is included but not in the file itself (in the main template that is used on many pages).