Why I can't just access the root-scope variable in the HTML's <script> </script> part?

I am a newbie to AngularJs and I am building a simple AngularJs web, I have set up the page and it works as I expect. But when I try to use the rootscope variable in the script part of my index.html. it always give an error: the variable is not define. However, I can still use the variable in the html part of the index.html. Can anyone tell me why it works like this? and how to resolve it? Thanks. Here is my simple HTML Code:

   <!DOCTYPE html>
<html data-ng-app="test" lang='laCo'>

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge; IE=10; IE=9">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet"
    href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

   <script>
     $( function() {
            loaddivpage();
        });
    loaddivpage = function(){
        window.Final = user.userId;
        $( "#innerdiv" ).load("./app/chat/Dialog.html");
    }
   </script>
   </head>
   <body> 
   <div id ="webdiv">
      <div id = "innerdiv"> </div>
   </div>
    </body>
  </html>

Here I want to load a Dialog.html into the innerdiv, which uses the window.Final variable. Note: user.userId is the rootscope variable.

Solution

I manage to find a way to do, since the html part has connection with the root scope, so I can use angular to fetch the root scope variable: Like: By using angular.element($("#your div id ")).scope() to get scope of the html part, and then use this scope to access the root scope variable. Hope this will help someone else.