Data Binding is not updating Angular JS

Question

I am really new in AngularJS but I have to make a web app using it, I have some input that control the style of an element (width, height, name, description and color) on the left side of my HTML. I used to had all elements hidden, when the user clicked it appeared and everything worked good, now I started using ui-router, if you click the 'Fullscreen' it will call thet html file. Some inputs work except the one I defined an initial scope value.

I leave a plunker so you can have an idea of what's going on.

http://plnkr.co/edit/jJTcZQb4lzZeAtNl7YZ1?p=preview

The main HTML:

<!doctype html>
<html lang="en" ng-app="bmiChatbuilder">
<head>
    <meta charset="UTF-8">
    <title>ChatBuilder</title>
    <!-- Adding Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/default.css">
    <link rel="stylesheet" href="assets/css/colpick.css">

</head>
<body ng-controller="myCtrl">

<div >
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2">
                <div>
                    <h3>Select your chat</h3>
                    <a ui-sref="fullscreen">Fullscreen</a>
                    <a ui-sref="chatbanner">ChatBanner</a>

                    <h3>Set your chat options</h3>
                    <label>Name:</label> <br>
                    <input type="text" ng-model="chatName" > <br>
                    <p>{{chatName}}</p>
                    <label>Description:</label> <br>
                    <input type="text" ng-model="chatDes" > <br>

                    <label>Width:</label> <br>
                    <input type="text" ng-model="myWidth"> <br>

                    <label>Height:</label> <br>
                    <input type="text" ng-model="myHeight">    <br>

                    <h3>Style your chat</h3>
                    <label>Header background:</label> <br>
                    <input type="text" class="color {hash:true}" ng-model="myBackground"> <br>
                    <label>Text color header:</label> <br>
                    <input type="text" class="color {hash:true}" ng-model="myColor"> <br>
                    <label>Text color description:</label> <br>
                    <input type="text" class="color {hash:true}" ng-model="myColordes"> <br>

                    <h3>Social media</h3>
                    <p>Want to add social media?</p>
                    <input type="checkbox"  ng-model="showsocialpanel"/>
                <label>Yes</label>
                <input type="checkbox"/>
                <label>No</label> <br/>

                <div ng-show="showsocialpanel">
                    <h3>Style your footer:</h3>
                    <label>Powered By:</label> <br/>
                    <input type="text" ng-model="poweredBy"/> <br/>

                    <label>Your background footer:</label> <br/>
                    <input type="text" class="color {hash:true}" ng-model="mySocialbg"/> <br/>


                    <h3>Add your social</h3>
                    <input type="checkbox" ng-model="facebookiconshow"/><label>Facebook</label> <br/>
                    <input type="text" ng-show="facebookiconshow" ng-model="facebooklink"placeholder="http://www.facebook.com"/>
                    <br/>
                    <input type="checkbox" ng-model="twittericonshow"/><label>Twitter</label> <br/>
                    <input type="text" ng-show="twittericonshow" ng-model="twitterlink"placeholder="http://www.twitter.com"/>
                    <br/>
                    <input type="checkbox" ng-model="linkediniconshow"/><label>Linkedin</label><br/>
                    <input type="text" ng-show="linkediniconshow" ng-model="linkedinlink"placeholder="http://www.linkedin.com"/>

                </div>

            </div>
        </div>

        <div class="col-lg-10">


            <div ui-view></div>

        </div>
    </div>
</div>

The fullscreen HTML:

   <div id="chat_box" ng-style="{width:myWidth}">
        <div id="chat_top">
            <div id="chat_avatar">

            </div>
            <div id="chat_header" ng-style="{background: myBackground}">
                <h4 ng-style="{color:myColor}">{{chatName}}</h4>
                <p ng-style="{color:myColordes}">{{chatDes}}</p>
            </div>
        </div>

        <div id="chat_container">
            <div id="history_div" ng-style="{height:myHeight}">
                <div id="history_mc">

                </div>
            </div>
        </div>

        <div id="chat_footer">
            <textarea id="input_area" rows="0"
                      type="text" maxlength="75" onkeypress="chatHandler(event)"></textarea>

            <div class="social_media" ng-show="showsocialpanel" ng-style="{background:mySocialbg}">
                 <ul>
                    <li ng-show="facebookiconshow">
                        <a ng-href="{{facebooklink}}" target="_blank">
                            <img src="assets/img/facebook.png" alt="Facebook Icon"/>
                        </a>
                    </li>
                    <li ng-show="twittericonshow">
                        <a ng-href="{{twitterlink}}" target="_blank">
                            <img src="assets/img/twitter.png" alt="Twitter Icon"/>
                        </a>
                    </li>
                    <li ng-show="linkediniconshow">
                        <a ng-href="{{linkedinlink}}" target="_blank">
                            <img src="assets/img/linkedin.png" alt="Linkedin Icon"/>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

The JS:

var bmiChatbuilder = angular.module('bmiChatbuilder', ['ui.router'])
bmiChatbuilder.config(function($stateProvider, $urlRouterProvider){

    // For any unmatched url, send to /route1
    $urlRouterProvider.otherwise("/")

    $stateProvider
        .state('fullscreen', {
            url: "/fullscreen",
            templateUrl: "fullscreen.html",
            controller:"myCtrl"

        })

})

bmiChatbuilder.controller('myCtrl', function ($scope) {

    $scope.chatName = 'Type your text tittle here';
    $scope.chatDes = 'Type your description here';
    $scope.myWidth = '800px';
    $scope.myHeight = '400px';
})

Thanks in advance for your help.

Kostya Shkryob · Accepted Answer · 2014-09-30 23:10:31Z

1

Router creates new myCtrl instance with it's own scope. You can create service to share data between two controllers or create another controller type for /fullscreen.

answered Sep 30, 2014 at 23:10

Kostya Shkryob

2,36918 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

It's still a little confusing about how to use the factory method to share data on the same controller, can you please provide me for a link to understand this.

Alex Over a year ago

Thank you so much I used factory method to solve this :)

Collectives™ on Stack Overflow

Data Binding is not updating Angular JS

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related