AngularJS/Jade not working with the ng-app directive

Question

i tried to build a small prototype Webserver (NodeJS/Jade) to learn AngularJS. Until now i only coded with NodeJS/Javascript/JQuery. I made these following blocks: The short expression {{ 843 / 42 }} is calculated correctly only when ng-app='' (without a specific name). When i use ng-app='myApp' the expression is outputed directly without calculcation. The two text boxes are not filled in with John Doe in botuh cases. Can anyone help me or give me an advise.

layout.jade

doctype html
html(ng-app='')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='/javascripts/angular/angular.js', type='text/javascript')
    script(src='/javascripts/angular/angular-resource.js', type='text/javascript')
    script(src='/javascripts/jquery-2.1.4.min.js', type='text/javascript')
    script(src='/javascripts/index.js', type='text/javascript')

    block scripts
  body
    block content

index.jade

extends layout

block content
  h1= title
  p Welcome to #{title}
  div
      table
        tr
          td
          | {{ 843 / 42 }}
          td
        tr
          td First Name:
          td
            input(type='text', ng-model='firstName')
        tr
          td Last Name:
          td
            input(type='text', ng-model='lastName')
        tr
          td Full Name:
          td
            | {{firstName + lastName}}
block scripts
  | <script type='text/javascript'>
  | $(document).ready(function() {
  |   Index_Load();
  | });
  | </script>

Index_Load:

function Index_Load()
{
    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });

}

Answer 1

The module myApp is only initialized on document ready which is not what angular expects. Instead of defining your module and controller in a function and calling it on document ready, use this

block scripts
  script(type='text/javascript').
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName= "John";
        $scope.lastName= "Doe";
    });

This will make sure your module is defined and is available to angularjs