Why is a dynamic input value not showing a change with Angularjs?

Question

I have a input with ng-model="articleTitle" and a div with {{articleTitle. When someone types in the input the div is updated.

However, I have a box that lists all the articles with <div class="element">...</div> around them. When a person clicks a list div I want the input to update then in turn the div that shows the title.

Everything works if I type in the input box. However, selecting an article does update the input box but not the div. If I add anything into the input box the div does update.

How, can I tell Angularjs that the input changed without interacting direction with the input?

----- edit -----

per request I've added some relevant code. This also include suggestions by mohamedrias :

html:

<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor">
...
<div class="feature box" ng-controller="featureBox">
    <div class="item">
        <div class="edit">
            <img src="/edit-image" />
            <div class="form-elements">
                <p class="title">Feature Settings</p>
                <div class="element">
                    <p class="select-trigger">Article</p>
                    <div class="select-box" id="set-article">
                        <p class="title">Select Article</p>
                        <div class="element current" data-value="11">Test Article</div>
                    </div>
                </div>
                <div class="element">
                    <input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
                </div>
                ...
            </div>
        </div>

        <div class="item-content featureBackColor">
            <h1>{{article.featureTitle}}</h1>
        </div>

    </div>
</div>

angular-scripts.js (loads in header)

var coverEditor = angular.module("coverEditor",['ngRoute']);

coverEditor.controller('featureBox',function($scope){
    $scope.article = {};
});

admin.js (jquery that loads in the footer)

$('#set-article .element').click(function(){
    var articleElement = $(this);
    var articleTitle = articleElement.text();

    $('#theme-layout .element').removeClass('current');
    articleElement.addClass('current');
    articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
});

The purpose of the jquery is to get values/text from the selected article and place it in the input changing the value and hopefully updating the title via angular.

----- edit -----

code update

html:

<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor">
    ...
    <div class="feature box" id="featureBox" ng-controller="featureBox">
        <div class="item">
            <div class="edit">
                <img src="/edit-image" />
                <div class="form-elements">
                    <p class="title">Feature Settings</p>
                    <div class="element">
                        <p class="select-trigger">Article</p>
                        <div class="select-box" id="set-article">
                            <p class="title">Select Article</p>
                            <div class="element current" data-value="11">Test Article</div>
                        </div>
                    </div>
                    <div class="element">
                        <input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
                    </div>
                    ...
                </div>
            </div>

            <div class="item-content featureBackColor">
                <h1>{{article.featureTitle}}</h1>
            </div>

        </div>
    </div>

angular-script.js:

var coverEditor = angular.module("coverEditor",['ngRoute']);

coverEditor.controller('featureBox',function($scope){
    $scope.article = {};

    //set artcle
    jQuery('#set-article .element').click(function(){
        var articleElement = jQuery(this);
        var articleTitle = articleElement.text();
        var scope = angular.element("#featureBox").scope();

        jQuery('#theme-layout .element').removeClass('current');
        articleElement.addClass('current');
        articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
        scope.$apply();
    });
});

mohamedrias · Accepted Answer · 2015-03-22 07:28:53Z

1

Updated based on comment

As you're out of angular scope and changing the value in Jquery.

You must use $scope.$apply() after the jquery statement which sets the value.

$('#set-article .element').click(function(){
    var articleElement = $(this);
    var articleTitle = articleElement.text();
    $('#theme-layout .element').removeClass('current');
    articleElement.addClass('current');
    articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
     $scope.$apply();

});

Assuming you're doing it in link function of directive or inside the controller.

If you're completely out of angular scope, then use

var scope = angular.element(document.querySelector(".feature.box")).scope();
scope.$apply();

   // change the selector based on your controller

So your code will be:

$('#set-article .element').click(function(){
    var articleElement = $(this);
    var articleTitle = articleElement.text();
    $('#theme-layout .element').removeClass('current');
    articleElement.addClass('current');
    articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
     var scope = angular.element(document.querySelector(".feature.box")).scope();
     scope.$apply();

});

edited Mar 22, 2015 at 7:28

answered Mar 22, 2015 at 6:58

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

10 Comments

dcp3450 Over a year ago

I updated my code to this (i think) but it didn't seem to change anything. I've updated my answer to reflect this.

mohamedrias Over a year ago

As you're working in jquery outside of angular scope, you must call $scope.$apply() there

mohamedrias Over a year ago

var scope = angular.element(selector).scope(); scope.$apply()

dcp3450 Over a year ago

updated question to show change in js. No errors but clicking a title still doesn't update {{article.featureTitle}}

mohamedrias Over a year ago

if you are using it inside the controller then just $scope.$apply is more than enough

|

Collectives™ on Stack Overflow

Why is a dynamic input value not showing a change with Angularjs?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related