A simple application of todo not adding input value to view

Issue

Every time my controller adds new input on view but blank, I want it should add new input with entered value.

<div class="container">
    <h2>My todos</h2>

    <form ng-submit="addTodo()" role="form">
        <input type="text" ng-model="todo" value="Something" placeholder="Add">
        <input type="submit" value="Add">
    </form>

    <p class="form-group" ng-repeat="todo in todos">
        <input type="text" ng-model="todo" class="form-control">
    </p>

</div>

The above code has separate temple main.html and calling that code inside index.html 

     <div ng-include="'views/main.html'" ng-controller="MainCtrl"></div>

then whenever I add new todo, its add input blank, and add null value inside todos array list. but when loading template without using ng-include its work fine.

angular.module('mymailApp')
  .controller('MainCtrl', ['$scope', function ($scope) {

    $scope.todos = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

    $scope.addTodo = function(){
        $scope.todos.push($scope.todo);
        $scope.todo = "";
    };

  }]);

Solution

so i solved the issue moving controller call to "main.html" template, as ng-include template doesnt call the ng-controller directly, it should use either $routeProvider or controller should be call inside the template

modified code looks something like that:

ng-controller="MainCtrl" moves inside main.html

Answered By - Mukesh