SumitHusky SumitHusky - 5 months ago 16
AngularJS Question

AngularJS two way data binding of a sentence and word count

During interview process by a company, I was assigned to solve a coding exercise which I did except Words Count part. This resulted in rejection for further interview process.

Now I'm trying counting number of words but have no idea if I'm doing right. So please suggest me the best way to count number of words in AngularJs according to the given problem?

My code plunkr

Output of my code

Thank you

<!DOCTYPE html>
<html ng-app="plunker">
<link rel="stylesheet" href="style.css" />


<div ng-controller="MainController as mainVm">
<div class="container">

<div id="heading">
<h3 id="header">Photo Data from JSON Endpoint</h3>
<div class="row">
<div class="col-sm-9">

<table class="table">
<tr ng-repeat="photo in" id="trow">
<td><img src={{photo.url}} class="img-responsive" alt="imgg" width="300" height="300"></td>
<div id="count">{{photo.title.length}}</div>
<td id="elem">{{photo.title}}</td>

<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="">
<style type="text/css">
.container {
background-color: #F5F5F5;
padding-top: 25px;

#heading {
margin: 0 auto;
text-align: left;
background-color: #9E9E9E;
padding-top: 25px;
padding-bottom: 25px;
border-radius: 10px;
width: 850px;
float: left;

#header {
text-align: left;
padding-left: 20px;
color: #FAFAFA;

#count {
border: 1px solid black;
border-radius: 5px;
background-color: #E0F2F1;

#trow {
background-color: #FFFFFF;
(function() {
'use strict';

.module('plunker', [])
.controller('MainController', MainController);

function MainController($http) {
var mainVm = this;

var query = {
albumId: 1

method: 'GET',
url: '',
params: query
.then(successFn, errorFn);

function successFn(response) { =;

function errorFn(response) {




Adding the split method with an argument of a single white space will break your string of characters into an array of words. From there, ask for the length and you'll have a word count.

Below is one of several methods for retrieving this:

<td>{{user.title.split(" ").length}}</td> //Add this line

I do want to stress that this is not necessarily the "correct" way to do it. But it is the easiest way considering the current structure of your application.