AngularJS two-way binding


I am having problems with two-way binding in AngularJS. In my HTML, I have:

<div class="row" ng-app="creation">
    <form class="form-horizontal" ng-controller="CreationController as cCtrl" ng-submit="cCtrl.send()" novalidate>
        <div class="form-group">
            <label class="col-sm-4">Model</label>
            <div class="col-sm-8">
                <input class="form-control" type="text" ng-model="cCtrl['data']['model']" id="model" />

On the JavaScript side, I have:

(function() {
    var app = angular.module('creation', ['validation', 'link']);

    app.controller('CreationController', ['$scope', function($scope) {
        $ = {};
        $ = 'hello';

Why is $ not displaying hello when I render the HTML page? Instead it is displaying nothing, and when I finally entering something in the input field, it updates $


This is because you’re setting your data model on the $scope but in your html you’re referencing under cCtrl which is a controller instance. Try just using ng-model=data.model in your html.

Answered By – r0dney

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published