Develop Reference

How to use Angular UI Bootstrap DatePicker Popup with ng-repeat

<div class="task-manager_block" ng-controller="ToDoCtrl">
<div class="form_block clearfix">
<form name="addToDo">
<input class="add-input" placeholder="I need to..." type="text" name="inputToDo" ng-model="formTodoText" ng-model-instant ng-minlenght ng-minlength="5" ng-maxlength="40" ng-required="true"/>
<button class="add-btn" ng-click="addTodo()" ng-disabled="! addToDo.inputToDo.$valid "><h2>Add</h2></button>
</form>
</div>
<div class="tasks_block" ng-controller="DatepickerPopupCtrl">
<div class="task_block col-md-3" ng-repeat="todo in todos">
<div class="text_block">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p>{{todo.text}}</p>
</div>
</div>
</div>
</div>
How can I open a single popup that I clicked on because now all of them are instantly opened independently of what I clicked.

This happens due to all the datepickers inside ng-repeat reference the same variable to check open state.
See this.
is-open="popup1.opened"
You will have to manage this state in a separate object.
For example,
In controller declare a empty object
let datePickersStat = {};
then in your HTML, you can use anything as object key as long as it's unique.
is-open="datePickersStat[todo.id]"
Hope that helps.

My angular form validation doesn't work

I use bootstrap with angular, and I disabled bootstrap's validation, angular still doesn't work. It seems that I already set everything.
My code likes below, every input's validation didn't.
<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">
<div class="input-group">
<div class="input-group-addon">True Name</div>
<input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
</div>
<div class="input-group">
<div class="input-group-addon">Nickname</div>
<input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
</div>
<div class="input-group">
<div class="input-group-addon">Mobilenumber</div>
<input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
</div>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="id_class in IDCLASSES">
<a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
</div>
<!-- /input-group -->
<br>
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-default" value="取消" type="button" ng-click="cancel_new_people()" />
</form>

What do you mean by input doesn't work?
Post your code of related controller please, because it is not clear what validation are you doing. If you have novalidate you should organize validation in your angular controller or HTML, e.g.:
<div ng-show="editting_people.realname.length<4">
Any error message here.
</div>

Datepicker UI-Bootstrap issue

I'm working with UI Bootstrap's datepicker and I some troubles.
The datepicker works fine, but calendar overflows from the sides.
In particular case look at this picture:
My code:
HTML
<div class="row">
<div class="col-md-6 col-md-offset-5">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt" is-open="popup2.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
JS
$scope.open2 = function() {
$scope.popup2.opened = true;
};
$scope.popup2 = {
opened: false
};
I have imported the following libraries(same order)
bootstrap.min.css
ui-bootstrap-csp.css
angular.js
angular-animate.js
angular-touch.js
ui-bootstrap.js
ui-bootstrap-tpls.js
I'm missing something? Sorry for the basic problem, but i don't understand why the datepicker had this behavior.

why is the AngularUI bootstrap datepicker not popping up?

trying out angularUI bootstrap's popup datepicker demo. Demo embedded in their page works, but my minimal plunker does not - button click does not popup the calendar. Any idea why?
JS:
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
console.log('opened is now: %s', $scope.opened);
};
HTML:
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" ng-model="dt" is-open="opened">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>

The problem is because you didn't supply datepicker-popup the format for the datepicker popup in your ng-model="dt" input.
simply change this
<input type="text" class="form-control" ng-model="dt" is-open="opened">
to this
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened">
Check this working plunker.

nested controllers in angularjs

we're pretty new to this. After finally managing to get ui-Bootstrap working with a date control :-
<div class="col-md-2 box" ng-controller="ResultFilter" >
<h2>Filter</h2>
<p class="input-group" ng-controller="DatepickerDemoCtrl">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.startdate" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event, 'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group" ng-controller="DatepickerDemoCtrl">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="resultfilter.enddate" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event, 'opened2')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group">
<select class="form-control" ng-model="resultfilter.frequency">
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Yearly">Yearly</option>
</select>
</p>
</div>
We are capturing the click with the following angular
CISApp.controller('ResultFilter', function ResultFilter($scope, $http) {
$scope.updateResults = function () {
};
});
how ever, how do we get at value of start date as it is within the controller of DatePickerDemoCtrl?
The following doesnt work?
$scope.resultfilter.startdate
any help would be appreciated

ng-controller creates new scope. Both of your DatepickerDemoCtrl are child scopes of ResultFilter. In your case, You could try:
$scope.$$childHead.resultfilter.startdate
This solution is not recommended IMO as it creates tightly coupled code, you're assuming that there is a child scope for this controller, some more recommended approaches:
Use $on, $emit, $broadcast to communicate between scopes.
Create a shared service to hold the state (I think does not apply in your case)