Modify <title> with Angularjs through a form

Question

I have the following code:

         <!-- define-pageTitle -->
    <div id="shareContent">
        <p class="subtitle-app mt30">Define title page</p>
        <form onsubmit="return false">
            <label>Who can browse this hotel:</label>
            <br>
            <input type="text" id="inputPageTitle" placeholder="Define here the title of the page" class="ng-valid ng-dirty">
        </form>
        <br>
        <input class="btnSubmit" type="submit" value="Save" ng-click="saveTitlePage()" hyatt-focus-invalid-field>
        <hr class="silverLinemt30">

    </div>

I need to take the title value of this Ubmit and change my DOM (title) through the Angularjs.

The idea is that a user changes the value of the title when they want through a form where he customizes.

Answer 1

Use the ng-model

<title>{{title}}</title>

<!-- define-pageTitle -->
    <div id="shareContent">
        <p class="subtitle-app mt30">{{title}}</p>
        <form onsubmit="return false">
            <label>Who can browse this hotel:</label>
            <br>
            <input type="text" ng-model="title" id="inputPageTitle" placeholder="Define here the title of the page" class="ng-valid ng-dirty">
        </form>
        <br>
        <input class="btnSubmit" type="submit" value="Save" ng-click="saveTitlePage()" hyatt-focus-invalid-field>
        <hr class="silverLinemt30">

    </div>